# Product selection - ProductSelector

{% hint style="info" %}
Availability of the functionality depends on the license and may not be available in all deployments.
{% endhint %}

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

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FAhPm5iI0Y9BjSg9KxirR%2Fimage.png?alt=media&#x26;token=3cdf3cec-c068-4344-ba94-394810c09f1b" alt=""><figcaption><p align="center"><em><strong>Figure 1.</strong> Example presentation of the component on a form</em></p></figcaption></figure>

✅ **When to use:**

* Selection of a product from a list, which may have a name, description, graphic, link, or additional content.

:x: **When not to use:**

* Only a simple list of short options is needed. **Use**: [Radio](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/radio) / [Tile](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/kafel-tile).

## Feeding the component with a script

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

{% code lineNumbers="true" expandable="true" %}

```js
function callService(context) {
    return [
        {
            "id": "1", // unique identifier of the item
            "name": "Currency account",
            "variantFor": "1", // if variantFor has the same value as id, it means this is a product and is displayed as a radio button
            "href": "https://exampleLinkToTheFeesAndCommissionsSchedule.pdf",
            "hrefLabel": "Open the Fees and Commissions 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>the 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 prefill the component with a default value, it should be added for the first item
        },
        {
            "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 point to the product id (radio), such an element will be treated as a card. In that case, imageUrl and alt should be provided
        },
        {
            "id": "2",
            "name": "Mega savings account 0 PLN",
            "variantFor": "2",
            "href": "https://exampleLinkToTheFeesAndCommissionsSchedule.pdf",
            "hrefLabel": "Open the Fees and Commissions 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>the 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",
        },
    ];
}
```

{% endcode %}

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FGTw2QdTPGxKSNpSaZzb2%2Fimage.png?alt=media&#x26;token=656bb1c9-b9df-4c83-b467-8588771c3419" alt=""><figcaption><p><em><strong>Figure 2.</strong> An example of connecting outputs in the component fed by the script above.</em></p></figcaption></figure>

![Figure 3. Example presentation of the component on a form](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/jvCNt8yYt9YTaNWfFVQj/1k_files/image2025-6-10_12-25-51.png)

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FYNLIhinY38ATbRWm3ctR%2FZaznaczenie_295.png?alt=media&#x26;token=15c21658-be5d-47e2-9b0c-4f4d32fa7be0" alt="" width="563"><figcaption><p align="center"><em><strong>Figure 4.</strong> Example presentation of the component on a form</em></p></figcaption></figure>

{% hint style="info" %}
Demo application: demoProductSelector
{% endhint %}

{% hint style="info" %}
♿WCAG: [WCAG best practices for low-code dev](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki)
{% endhint %}