The new and improved Support and Downloads pages are now live! You asked, and we listened. Visit the Support and Downloads Experience page to learn more about this update.

Multi Picker

Introduction

The Multi-Picker Component is used to replace huge tables that may not fit the web page or are too long to keep the page easy to navigate. The Multi-Picker Component enables filtering by up to three parameters (such as a product model, version, or operating system). A live example is shown on this page (under the 'Compatible Hardware' tab). The Multi-Picker Component also allows up to two data fields for additional information. So, in total, up to five columns of information. Three are picker menus, and two are data.


Specifications

Character Limit/Usage

There is no character limit on this component's properties.

Image Requirements

There are no image requirements. 

Video Requirements

There are no video requirements. 

Styling

There is no specific styling for this component. 

Authoring Instructions

The Multi-Picker Component reads data from a JSON file. You generate the JSON file from an Excel file.

We use an Excel sheet to create the table that will be converted to a JSON file and used by the component.

The Excel sheet has the first one, or two, or three columns reserved for the picker menus. Following one, or two columns reserved for data.

The component uses the first line from the Excel table as a table header.

It is important that the picker header strings in the component match exactly the strings from Excel's first line. (connects correct column from the Excel with the picker menu in the component)

Picker columns in the Excel sheet must be plain text to function properly.

Data columns can contain the below three formatting options:

Bold text is created by placing the text between the  <b> and </b> HTML codes
example:  “This text is <b>bold</b>.”

Line break (an enter that moves the following text to the next line) is created by placing the <br>  HTML codes in a place when you want to ‘jump’ to the next line.
Example: “This text is on the first line. <br> and this text is on the second line.”

Hyperlink text is following this HTML code pattern. It has two parts: the URL and the label text. The entire section is placed in between <a …..> and </a>
example. <a href="https://example.com" target="_blank">Link Label</a>

Adding a ‘space’, use this HTML code: &nbsp
sample:
Support Community <br>
&nbsp - Submitting a technical support case<br>
&nbsp -  Asking a question in the technical support discussion forum<br>

Note:
When the data column is just a number, ensure the cell is set as ‘Text’ and you see the green triangle in the corner. If you do not see the triangle, press F2 (Edit) and press Enter key.

The JSON tool rejects a spreadsheet conversion if the number-only cells are not in the above format.

When you have the Excel sheet ready, the next step is to convert it to a JSON file and upload it to the correct DAM folder.

Both of these activities are done by using the Excel-to-JSON conversion tool.

The tool Location – https://author-p106488-e1080713.adobeaemcloud.com/apps/zebra-web/excel-to-json/components/content/excel-upload.html

DAM location for the JSON files - https://author-p106488-e1080713.adobeaemcloud.com/ui#/aem/assets.html/content/dam/zebra-it/support-production/multi-picker

There are two sub-folders

1.      Source
Store Excel sheets there.
Excel sheet name equals the support page name to easily identify the right source file.

2.      JSON
This is the place where you save converted JSON files and use the path within the multi-picker component to it.

The last step is to fill the Multi-Picker component properties:

  •  JSON DAM path
  • Multi-Picker fields

Use Cases and Style Variations


Need Help?

If you need help with a specific use case for the multi picker component or need guidance with appropriate configuration, please contact Pavel Sebela.