Product selection - ProductSelector

Availability of functionality depends on the license and may not be available in all deployments.

The component is used to present a list of products for the user to choose from.

Figure 1. Example presentation of the component on a form

✅ When to use:

• Selecting a product from the list, which can have a name, description, image, link, or additional content.

❌ When not to use:

• Only a simple list of short options is needed. Use: Radio / Tile.

Feeding the component with a script

Example implementation of a script feeding the component shown in Figure 1.

function callService(context) {
    return [
        {
            "id": "1", // unique identifier of the element
            "name": "Foreign currency account",
            "variantFor": "1", // if variantFor has the same value as id, it means that this is a product and is displayed as a radio button
            "href": "https://przykladowyLinkDoTaryfyOplatIProwizji.pdf",
            "hrefLabel": "Open the Fee and Commission Schedule",
            "contentHtml": "<ul style=\"list-style: none; padding: 0; margin: 0;\"><li style=\"margin-bottom: 16px; height: 24px; display: flex; align-items: center;\"><span style=\"margin-right: 16px;\">✅</span><span>convenient cash and cashless payments</span></li><li style=\"margin-bottom: 16px; height: 24px; display: flex; align-items: center;\"><span style=\"margin-right: 16px;\">✅</span><span>ability to carry out transactions on the Internet</span></li></ul><div><div style=\"\">Card issue fee: <strong>0 PLN</strong></div><div style=\"\">Monthly card usage fee: <strong>5 PLN</strong></div></div>",
            "initValue": context.getFirstParameter('value') //if we want to feed the component with a default value, it should be added for the first element
        },
        {
            "id": "1_1", // the component will save only the value of the selected card. If information about the selected product is important, the card id should point to the product
            "name": "title1_1",
            "imageUrl": "/assets/productSelector/productSelectorCardTemplate1.png",
            "alt": "Card 1_1",
            "variantFor": "1", // if in the variantFor field we indicate the product id (radio), such an element will be treated as a card. Then imageUrl and alt should be provided
        },
        {
            "id": "2",
            "name": "Mega savings account 0 PLN",
            "variantFor": "2",
            "href": "https://przykladowyLinkDoTaryfyOplatIProwizji.pdf",
            "hrefLabel": "Open the Fee and Commission Schedule",
            "contentHtml": "<ul style=\"list-style: none; padding: 0; margin: 0;\"><li style=\"margin-bottom: 16px; height: 24px; display: flex; align-items: center;\"><span style=\"margin-right: 16px;\">✅</span><span>convenient cash and cashless payments</span></li><li style=\"margin-bottom: 16px; height: 24px; display: flex; align-items: center;\"><span style=\"margin-right: 16px;\">✅</span><span>ability to carry out transactions on the Internet</span></li></ul><div><div style=\"\">Card issue fee: <strong>0 PLN</strong></div><div style=\"\">Monthly card usage fee: <strong>5 PLN</strong></div></div>",
        },
        {
            "id": "2_1",
            "name": "title2_1",
            "imageUrl": "/assets/productSelector/productSelectorCardTemplate1.png",
            "alt": "Card 2_1",
            "variantFor": "2",
        },
        {
            "id": "2_2",
            "name": "title2_2",
            "imageUrl": "/assets/productSelector/productSelectorCardTemplate2.png",
            "alt": "Card 2_2",
            "variantFor": "2",
        },
        {
            "id": "2_3",
            "name": "title2_3",
            "imageUrl": "/assets/productSelector/productSelectorCardTemplate3.png",
            "alt": "Card 2_3",
            "variantFor": "2",
        },
    ];
}

Figure 2. Example of connecting outputs in a component fed by the above script.

Figure 3. Example presentation of the component on a form

Figure 4. Example presentation of the component on a form

Demo case: demoProductSelector

♿WCAG: Good WCAG practices for low-code dev