Screen: Table Multiple Selection
В
Автор: Валерия Зимницкая
Обновлено больше недели назад

Screen identification in the theme template

The Screen:TableMultipleSelection can be easily identified among the presented screens in the theme template on the upper right corner of the onboarding dashboard, as it contains the corresponding title and the table. The basic design of the screen does not contain any images; however, it may be customized if needed in the background or in the selection rows/fields by changing the required parameters.

List of parameters presented in Screen: TableMultipleSelection

  • Background

  • Basic Configuration

  • Navigation Bar

  • Title

  • Subtitle

  • 1 Column Table

  • Footer Button

📢 Please note that all parameters can be 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 of such a design is a possibility for a user to select multiple answers at once. All answers are displayed in the form of a list. Thus, you may add as many selection fields 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. Title/Subtitle parameters display with the 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

3. Table design

The selection fields can be customized differently as well by installing the needed format as presented in the list below:

⚠️ The option to change the selection field 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

CheckboxTitle

This selection field design implies the choice among short answers available for the customers without any details. No specific installations are required here, only your composed text.

CheckboxTitleImage

In this design, you may easily add the image operating in several 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:

CheckboxTitleSubtitle

The selection field is composed of the main answer or Title and additional explanation or commentary to this answer or Subtitle. The composed text should be placed in the corresponding Title or Subtitle field of the Table parameter:

CheckboxTitleSubtitleImage

The selection field design gives the possibility to compose the main text as an answer, add commentary with explanations to this answer, and generate the corresponding image. Settings arrangement is found in the Table Items parameter in the Title, Subtitle, and Image fields.

ImageTitle

In this selection field design, the image goes to the first place to set up, and then only a short answer is added to the Title field in the Table item parameter.

📢Remember there are 3 ways to add or generate the image per your request:
1. Insert a URL link with the required image, or choose one from the assets.
2. Upload a picture from your device by clicking the Camera sign.

3. Generate an image with the Image AI Generator by clicking the Settings sign.

ImageTitleCheckbox

This design of the selection field implies the presence of a checkbox for users to click; however, its location is arranged on the right in comparison with the series of selection fields design starting with the "Checkbox..." on the first place, on the left side of the bar, to be precise.

The setting on filling out of image and the text field remains the same.

ImageTitleSubtitle

The design implies putting the image in the first place, then adding the Title as an answer to select, and providing the Subtitle as a comment on the answer in question.

📢 Please note even the presence of such a function as Subtitle in the Table parameter is only up to your discretion.

ImageTitleSubtitleCheckbox

This layout of the selection field design implies the presence of all possible functions in the selection item where the first place is occupied by the image, then goes the Title and Subtitle, and after that the checkbox on the right side of the selection bar.

Title

The design contains only the Title fields as answers to fill out without any additional visual options.

TitleCheckbox

The main focus is made here on the Title that goes first, and then the checkbox placed on the right side of the selection bar. No specific settings are required despite composing the text in the Title fields.

TitleImage

The layout of this selection field design pays attention to the Title field and supports it with the corresponding image.

TitleSubtitle

The main focus is made on the text comprising of the Title and the Subtitle fields of the Table items parameter.

TitleSubtitleCheckbox

The design contains the Title, the Subtitle, and the checkbox placed on the right of the selection bar. The settings only require text to fill out in the Title and Subtitle fields.

TitleSubtitleImage

The right checkbox is replaced by an image to insert or generate.

4. 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.

To work with the selection lines and set the corresponding colors, you should pay attention to the fields: list background color, list border color, list border width, and list border radius.

To work with the Selected field customization, design the following fields: selected background, selected border color, selected border width, and selected border radius.

The Text design can be adjusted in font, color, size and its placement if customize the following fields:

TitleTextFontFamily, TitleTextLineHeight, TitleTextFontSize, TitleTextFontWeight, TitleTextColor, TitleTextBackground, and TitleTextAlign.

The Table parameter provides an option to choose from the checkbox form: either squared or rounded boxes are applicable.

Moreover, the settings allow the customization of the checkbox color: the unselected checkbox (checkbox color) and the selected one (the selected color).

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.

Нашли ответ на свой вопрос?