Working with Film Strip in Oracle visual Builder Cloud Service

This article illustrates working with Film Strip component in Oracle Visual Builder.

In Oracle Visual Builder Cloud Service (VBCS), a Film Strip component is a UI component that allows you to display a scrollable list of items horizontally, similar to a carousel or slideshow. Think of it like a strip of film showing a series of “frames” or “cards” side by side. Following are the steps to complete this use case:

1. After creating a Web application, Create Employees Business Object with 3 fields: First Name ,Last Name,Job

Go to the Data tab and click on + Row to add some rows to Business Object.For more detail on the creation of Business Objects please refer to our antecedent blog which includes the steps to create Business Objects.

2.Go to main-start page and switch to Variables tab and create variables currentJob(object), jobs(Array of Objects) as shown in the below screenshot:

3. Switch to Action Chains tab in main-start page,click on +Action Chain button, enter the Id and click on Create button as shown in the following scresnshot:

4. Drag and drop CallRest action and select the endpoint as shown in the following screenshot:
5. Select Get all Service from EmployeesBo and click on Select as shown in the following screenshot:

6. Drag and drop Assign Variable action and map the jobs Array to the rest response as shown in the following screenshot:

7. Drag and drop Call component and select the film-strip components id as shown in the following screenshot:

8. Go to Event Listeners tab, click on +Event Listener, select VBEnter event and Click on Next button as shown in the following screenshot:

9. select fetchJobs and click on Finish button as shown in the following screenshot:
10. Now go to designer tab in main-start, drag and drop film-strip from Components pallet to design area as shown in the following screenshot:

11. To provide data to the film-strip let’s go to code mode and add some code manually to add some css and a template as given below:

<oj-film-strip max-items-per-page="3" current-item="{{ $variables.currentJob }}" data-oj-context   aria-label="filmstrip"   id="filmstrip" 

style="width: 100%; max-width: 600px">

    <oj-bind-for-each data="[[ $variables.jobs ]]">

      <template data-oj-as="data">

        <div class="oj-panel oj-sm-padding-4x" :style.width="[[ $application.responsive.smOnly ? '200px' : '400px' ]]">

          <span :class="[[ $application.responsive.smOnly ? 'oj-typography-body-md' : 'oj-typography-body-xl' ]]">

                    <oj-bind-text value="[[ $current.data.job + 's' ]]"></oj-bind-text>

                  </span>
        </div>
      </template>
    </oj-bind-for-each>
</oj-film-strip>

12. Now let’s configure the table. Drag and drop the Table from the components pallet to the design area below the film strip component as shown in the following screenshot:

In the table properties, switch to Quick Start tab and click on Add Data as shown in the following screenshot:

13. In the Add Data pop-up, select EmployeesBo and click on the Next button as shown in the following screenshot:
14. Select the columns that you wish to show on the UI and click on Next as shown in the following screenshot:
15. First, expand the URI parameters and add the following code to the q parameter to establish connectivity between the film strip and the table.

$variables.jobs.length==0 ?'job= "Manager"': 'job='+ "'"+$variables.jobs[$variables.currentJob.index || 0].job +"'"

This ensures the table data refreshes automatically whenever a new job appears in the film strip. Then, click the Finish button as shown in the screenshot below.
With this change, the table filtering based on the film strip value is complete. You can now preview the application in your browser to test the functionality. You should see the list of jobs displayed inside the film strip component. The film strip can move left and right to show different options.