One of the new features in Visual Builder 2404 is the inclusion of the Oracle JET core components in the component palette. The new core components provide new implementations of several component that improve performance and, in many cases, introduces additional functionality. You can learn more about the JET core pack here.

Core pack components

Note that the components right now appear as "early access" in Visual Builder, the main reason is that they currently don't support theming – so only use them if you are ok using the default Redwood theme for now.

One such component is the Select Multiple component, which improves the interface for a drop down list that lets the user select multiple values.

In the video below I show how to work with the component, going over populating the values and then processing the selected values.

In the video we use the value change event on the variable that is bound to the value property. Alternatively you could use the selection event on the component itself and get similar results converting the value set to an array. The code would be:

    async run(context, { value }) {
      const { $page, $flow, $application } = context;

      const myArray = Array.from(value);

      const forEachResult = await ActionUtils.forEach(myArray, async (item, index) => {

        await Actions.fireNotificationEvent(context, {
          summary: 'selected',
          message: item,
          displayMode: 'transient',
          type: 'info',
        });
      }, { mode: 'serial' });
    }

Check out the new functionality.