The `oj-sp-collection-container` component in Oracle Redwood is a versatile component for managing and presenting collections of data, offering a range of features that enhance the development process and provide consistent user interface. In this blog we'll focus on its column selection capabilities providing powerful flexibility and customization options for end users. Column selection in the `oj-sp-collection-container` component allows users to customize the columns displayed in a collection of data. This means that users are given the option to choose which specific pieces of information they want to see and hide the ones they don't need. It empowers users to tailor the data presentation to their unique requirements, improving their overall experience with the application.

columns selections dialog

Functionality Overview

When column selection is enabled in the `oj-sp-collection-container`, users are presented with a dialog that allows them to select and deselect columns and configure their order. Here's a step-by-step breakdown of how it works:

  • Column Selector: The component provides a dedicated column selector popup that displays a list of all available columns in the collection.
  • Selecting Columns: Users can interact with the column selector to choose the columns they want to view. They can select or deselect columns by checking or unchecking the corresponding options.
  • Dynamic Updates: As users make their column selections, the `oj-sp-collection-container` automatically updates the UI to reflect the chosen columns. The selected columns are displayed in the collection view, while the deselected columns are hidden from view.
  • Column Reordering: In addition to selecting columns, users are given the ability to reorder the selected columns. This allows them to rearrange the columns according to their preferences, further customizing the data presentation.
  • Persisting Selections: The `oj-sp-collection-container` can be configured to persist user selections across sessions. This means that when a user returns to the application, their previous column choices are remembered, providing a consistent and personalized experience.

Benefits of Column Selection

The column selection capabilities offer several advantages for both users and developers:

  • User Customization: Column selection empowers users to customize the data display according to their specific needs. Different users may have different preferences or requirements, and column selection allows them to focus on the information that is most relevant to them.
  • Enhanced Usability: With column selection, users can simplify complex data tables by hiding columns that are not of interest. This reduces clutter and improves the overall usability of the application, especially when dealing with large datasets.
  • Flexible Data Presentation: Developers can offer a more flexible and adaptable UI by enabling column selection. This feature allows the application to cater to a wider range of user preferences and use cases, enhancing the overall user experience.
  • Dynamic Layouts: Column selection can be combined with responsive design techniques to create dynamic layouts. For example, on smaller screens or mobile devices, users may choose to display only the most critical columns, optimizing the UI for different form factors.
  • Personalization: By persisting user column selections, developers can provide a personalized experience. Users appreciate having their preferences remembered, creating a sense of familiarity and efficiency when using the application.

Setting It Up

Here is a quick demo of setting up the columns selection:

Start by dropping an oj-sp-collection-container on the page, and add a table of data into the collection slot. Turn on the manage columns attribute to add the button to the UI.

Define a new variable of type array-of-objects to store the active columns. Add relevant attributes to the object including the mandatory id and headerText. Check the default value of the columns attribute of the table and add any additional attributes to the active columns variable. 

You can then copy the default value of the table's columns attribute and assign it to the active columns variable. Add the id attribute to the default value for each column. Switch the table's columns attribute to be bound to the same active columns variable.

You can duplicate the active columns variable to create a hidden columns variable that will store columns that the user can add to the table later.

If you are starting with some hidden columns, make sure the SDP or ADP that is the base for the table is configured to be able to fetch these columns when needed.

Tip – the active and hidden columns variables can be set to persist the data in a session or device level – to persist the user preferences across visits to the page.

Active Columns Variable settings

Conclusion

The column selection capabilities of the `oj-sp-collection-container` component in Oracle Redwood offer a powerful way to enhance the user experience and flexibility of data-driven applications. By allowing users to choose and arrange columns according to their preferences, developers can provide a more tailored and dynamic UI. With its ability to simplify data analysis, improve usability, and enable personalization, column selection is a valuable feature for any application that involves working with collections of data. By leveraging this capability, developers can create applications that are not only functional but also highly adaptable to the unique needs of their users.