Transform component

A transform component modifies lists or other types of repeating data.

Could be used to:

• Add new items to a list
• Rearrange items in a list
• Remove items from a list

How it works

1. Data is passed to the transform component.
2. The component returns a modified version of the data.
3. The modified data is passed to the next transform component (with the same location), and the process continues.
4. Finally, the modified data is returned to be used on the page.

Any kind of data can be used as long as it is in list form. The type of data used depends on where it is implemented in the Future Ordering UI.

Example

The pop-out menu on the Future Ordering UI consists of a number of standard menu items. These items are passed as input to the loadTransformComponents function with the location "popout-nav-menu-item". Each transform component registered at that location is run in series, with the output from one component used as input to the next.

Here's an example of a transform component that adds a menu item at the beginning of the list:

context.componentLoader.registerTransformComponent({
    location: 'popout-nav-menu-item',
    loadContent: (ctx, input) => {
        const currentMenuItems = input ?? [];
        return [
            {
                text: `Discounts`,
                icon: '',
                destination: '/',
            },
            ...currentMenuItems,
        ];
    },
});

Component locations

Transform component locations

Link to page component

The example above links to /, which is not very useful. More common is for a menu item to link to a page component. This is achieved with "location.getPageComponentAbsolutePath" on the context object.

Example that gets the url to the "discount" page component

const url = context.location.getPageComponentAbsolutePath('discount');
// url: /gb/en-gb/pages/discount

Placeholders

While transform components are being loaded, the list of data it modifies is updated asynchronously, and changes can appear after some time. Let's say a transform calls another API, and the API is not responsive or the network is slow; it could take a while for the list to fully load.

Therefore, it is recommended for a transform component to use placeholders. A placeholder is inserted at the place where the data the component generates is expected to be placed. This helps avoid layout shifts by maintaining consistent layout dimensions during data loading and also informs the user that data is being loaded.

Here's an example. See the placeholder property below. Index 0 in this example inserts a placeholder first in the list (negative values can be used to insert from the end of the list), and slot 1 indicates that it is one placeholder that should be inserted.

context.componentLoader.registerTransformComponent({
    placeholder: {
        index: 0,
        slots: 1,
    },
    location: 'popout-nav-menu-item',
    loadContent: (ctx, input) => {
        const currentMenuItems = input ?? [];
        return [
            {
                text: `Discounts`,
                icon: '',
                destination: '/',
            },
            ...currentMenuItems,
        ];
    },
});