The Data Palette
The Data palette provides a data-centric approach to application design. Instead of you choosing UI components and binding each component to a data source, this design approach starts with your data sources and suggests UI options that optimally display your application's data.
Data is the basis of any application, and when creating an application in Visual Builder you can work with multiple sources of data, all of which is based on REST. You can create business objects and use the REST endpoints automatically generated for the object to fetch your data, define service connections that link your application with external REST APIs to retrieve data, or consume services from multiple sources in combination with your own business objects.
The Data palette brings all these data elements together, allowing you to drag and drop them onto the canvas and render their data in components tailored to display that data. You also have access to quick starts that simplify the task of binding that component to fields in your data sources.
Here's a Data palette example, showing an Employee object's endpoints as well as the accounts
endpoints (available through a connection to the Sales and Service (crmRestApi
) service in the Oracle Cloud
Applications catalog):
Description of the illustration data-palette.png
Now let's say you want to show employee data on a page: you would simply drag the Employee business object from the Data palette and drop it on the canvas. (You can drop a data element on the page canvas, in the Structure view, or in Code view.) When the Render as pop-up appears, you can choose from the list of components that Visual Builder suggests based on the available REST endpoints:
Description of the illustration data-palette-dynamic-employee-table.png
Notice how both dynamic and standard options are shown. Once you select an option, the corresponding quick start opens, to walk you through the required configuration tasks.
You use the Data palette in much the same way to fetch data from a service connection's endpoints, except when a service contains multiple endpoints of the same type—for example, two Get Many
endpoints—you'll be additionally prompted to select the correct endpoint:
Description of the illustration data-palette-select-endpoint.png
You don't always have to work with whole objects or services; if you know what kind of data interaction you want, you can drag and drop a particular endpoint. For example, to let your users create new employees, you only need the create employee
endpoint, not the whole Employee object.
Endpoint Type | Component | Associated Quick Start |
---|---|---|
Get Many | Table, Table Dynamic, List, List Dynamic | Standard: Add Data Dynamic: Configure Layout |
Create | Create Form, Create Form Dynamic | Standard: Configure as Create Form Dynamic: Configure as Create Form |
Get One | Detail Form, Detail Form Dynamic | Standard: Configure as Detail Form Dynamic: Configure as Detail Form |
Update | Edit Form, Edit Form Dynamic | Standard: Configure as Edit Form Dynamic: Configure as Edit Form |
When working with quick starts in the Data palette, keep in mind that both standard and dynamic component quick starts add a form or a table to the existing page and configure it; they don't add pages to your application like they do for standard components or configure an existing form or table, as in the case of dynamic components. Except for this key difference, the quick starts are similar to those used for standard and dynamic components.