Screen: Two Column Multiple Selection

The layout and the design settings for the screen with a 2-Column Table of multiple selection

O
Written by Onboarding.Online Support Team
Updated over a week ago

Screen identification in the theme template

The Screen: TwoColumnMultipleSelection is presented in the form of the table arranged in 2 columns. The main visual hint for the screen differentiation of such a type in the theme template is the presence of the generated images or photos installed into the design.

The default design of the screen with the Two Column Multiple Selection consists of the following features:

  1. 2 column selection list

  2. Colored icons, or generated images

  3. No navigation bar is depicted on top of the screen

  4. Multiple selection list

  5. No checkboxes

List of parameters presented in Screen: TwoColumnMultipleSelection

  • Background

  • Basic Configuration

  • Navigation Bar

  • Title

  • Subtitle

  • 2 Column Table

  • Footer Button

📢 Please note that all parameters can be customized and switched off or on depending on your app design.

Here, you may see where these parameters are displayed in the screen precisely.

Screen peculiarities and functions

1. Selection fields quantity

The main screen function with 2 Column Table is that all answers are displayed in the form of big images arranged in 2 parallel columns. Thus, you may add as many selection icons as needed per your app purposes since its quantity is not limited.

⚠️ Please note the more selection fields are added, the more actions are required for the user to scroll the page down or up!

2. Navigation bar parameter display with the 2 Column Table

Originally, the screen does not display the Navigation Bar parameter, however, it can be easily customized by switching on the required bars (active buttons with the progress bar included) and setting up necessary design features.

In the "Back" settings you can customize the font, its size, color.

If required, you may switch on the progress bar to estimate the steps already taken by the user in this screen in particular. This setting is also located in the Navigation Bar parameter.

Here you may set the needed grade on the progress bar and the color which will be indicated in the screen.

The Skip button possesses the same functionality as the Back button, which allows you to customize the button's size, font, and color.

📢 Please be informed that these parameters can be easily switched off by unchecking the corresponding boxes in the Navigation Bar parameter depending on the features you install into your app screen by screen.

3. Title/Subtitle parameters display with the 2 Column Table

To save some space in the screen, you may also work with the text lines by removing Title or Subtitle parameters or even both. To remove those parameters, the text itself should be deleted in the corresponding parameter field below:

Please see below the screen design in such cases:

No Title
Subtitle

Title

No Subtitle

No Title

No Subtitle

4. Table design

The selection icons in 2 Column Table Screen can be customized differently as well by installing the needed format as presented in the list below:

⚠️ The option to change the selection icon design is located in the Table parameter. Customization is possible only within the formats presented on the drop-down menu.

Please study how the selection field design changes in the screen in the preview below:

Selection List Design

Functionality

BigImageTitle

While working with the table with 2 columns, you mainly focus on the size of the image inserted into the screen; however, in this design type, the image is supported with the text with the help of the following settings:

In order to set the image, you choose one of the following ways:

  1. You should insert the needed Image URL or choose one from the assets.

  2. You may upload an image or photo from your device by clicking the Camera sign.

  3. You can generate the image with the AI Generator in the settings.

📢 Just remember to specify as precise description for the needed image as possible.

📢 Image AI Generator offers 12 images for selection at once. Note that you may re-generate them if none suitable is found.

4. See how the chosen image can be reflected in the selection field in the preview and adjust with the corresponding setting to fit the app design. The settings are placed in the Table parameter in the Settings sign.

FullImage

In accordance with the settings embedded, here you work only with the images of full size, which are visually larger in comparison with the previous selection list design. The ways for the installation of images are the same as in the above mentioned design.

⚠️Advise: In this design type, the selected items should be colored brighter since the selection can hardly be identified due to the image size.

MediumImageTitle

The image corresponds to the medium size where the text part is placed inside the box, however, under the image.

The settings for the image and the Title part are located in the Table items parameter.

SmallImageTitle

The selected box comprises the image of the small size with the text inside the box placed.

TitleSubtitle

By default, the TitleSubtitle selection list design in the screen with 2 column table is visually shifted to the bottom of the screen. Such settings to be corrected (if required) are placed in the Table parameter in the Settings sign.

Title

The same thing with the visual downshifted layout goes to the Title selection list design which can be set up with the required customization in the Settings sign of the Table parameter.

5. Table settings

The main customization takes place in the Settings of the Table parameter where you can work with the Table design, set the colors, text fonts and size, work with the selection bar size, and specify the selected field.

These Table settings imply the choice of the selection list design offered on the drop-down menu, and the customization of the selection boxes with color, width, and radius. Please see nearby how the customization might look like applying the above-mentioned settings.

This part of the settings deals with the visual customization of the selected items so that the picked images/answers can be differentiated. Also, the alignment helps arrange the location of the selection list in the screen, for example, as in the screenshot nearby.

These settings mainly deal with text customization in size, font, color, and placement.

6. Footer Button

In the Footer parameter you may either switch on the Footer button and/or Log in button or switch them off (both or only one per your choice).

Footer Button

No Log in Button

Footer Button

Log in Button

No Footer Button

Log in Button

No Footer Button

No Log in Button

All the settings can be adjusted and customized in the Settings sign of the corresponding button field.

📢 Remember that there is always an option to apply the AI Text Generator if needed which is placed below the Footer parameter.

To learn more details about the way the Screens work and what functionality they obtain, please study the following article Onboarding Screen Template, or ask our team if there are any additional questions.

Did this answer your question?