The Oracle Redwood Collection Details pattern is redwood's interface for searching a list of records and picking a specific record (or multiple records) to get more information about, and potentially edit. You can read the design document for this pattern here.
Once your app is set to use the Redwood templates and components, you'll be able to create pages using this pattern which is available as one of the page templates offered. In the demo below we develop a page that uses the pattern from scratch – rather than relying on the template.
Setting Up the Page
First we'll add the template component (oj-sp-collection-detail-page) to the page, and set the template basic attributes such as page title, subtitles etc.
The pattern leverages several other Redwood layout components.
In the default slot of the template, you should use a collection container (or advanced collection container – oj-sp-collection-container-advanced) to show a list of items. For the list you can use the Redwood list item template.
The advanced collection container has a slot for a search component. In the video we are using a simple input search, you can also use a smart search component.
Make sure to bind the template's selected-items attribute to an array variable – without it, the detail slot won't show up when your run the page.
In the detail slot we use a detail panel Redwood component (oj-sp-detail-panel). This component can switch between read and update mode for a record. When the Edit button is pressed, the component will show buttons to update the records or cancel – you can assign events to the detail panel to handle those two buttons. We use a page variable to map to the edit mode status which impact whether the form layout we are showing is in read or write mode. Note that you can have separate layouts for read vs update in the page using a bind-if or a switcher.
Into the no-selection slot we add Redwood's empty state component (oj-sp-empty-state) – which is a place holder component that shows up when no items were selected. It can be used to notify the customer what we expect them to do. It also can have links and actions defined if needed.
The demo above shows the basics of using the page template and various components, feel free to explore further and leverage other attributes and layouts as needed.