UI Builder - Data Resources

#Now Experience , #UI Builder , #Quebec Release , #UI Builder Bytes

Brad Tilton

4 minute read

We are releasing some UI Builder related content every week during the Quebec Early Availability period. So far we’ve covered how to get started and a quick overview, and all about pages in UI Builder. This week we’ll be focusing on Data Resources.

A Data Resource in UI Builder allows you to fetch data from the instance to the page and then consume that data from a component. Previous to the Quebec release, component authors had to hard code REST or GraphQL queries as well as any data transformations into their components. Being able to decouple fetching data from the components themselves allows component authors to create more dynamic components that you can reuse across different pages and experiences. In fact, if you are building custom components you should try not to do any data fetching directly from the component, but rather use component properties to bind your component to data from a data resource.

Data Resource Types

There are both server and client side data resources. Server data resources are dynamically generated at runtime whose source of truth is the instance, and they do things like query data, perform other data operations, and transform data. Conversely, client-side data resources are basically client state managers.

Using Local Data Resources

Data resources are organized by application, and then by the data resource type like Server data or Client data. One important note here is that they are organized by the application they are defined in, not the application they are available to. The primary application you will probably pull data resources from will be the global application, and you can use data resources from global in your scoped application. I won’t spend much time enumerating the different data resources because there is already a great list on the docs site.

You can see in the following video how to use a data resource to query data and then bind the data you get back to a component property.

In this video I used a data resource to query data, but there are also data resources to mutate and transform data.

Creating a New Data Resource

I think you’ll be able to a lot with the existing data resources, but you also have the ability to create your own data resources across the following types:

  • GraphQL - Executes a GraphQL operation you define in the data resource definition. You might use this if the existing data resources don’t do the exact query or mutation you’re looking for.

  • Transform - Takes in input data, usually from another data resource, and transforms it into another format. For example, your GraphQL data resource is going to return data in a GraphQL query format, which may be difficult to use in a component. You can take that data and format it in a way that your component expects. I think this will be one of, if not the, most common types of data resources that customers and partners create.

  • Client State - Client side data resources.

  • Composite - Combine multiple data resources together into a single, reusable resource. If you’re constantly pairing the same GraphQL and Transform DRs together you can make a composite and save some time.

  • REST - Similar to GraphQL, except it makes REST API request.

Once you know what type of data resource you want to create, you have to define its properties. Data Resource properties are basically the inputs that get exposed when you add the data resource to UI Builder. Typically for query data resources these are table names and query parameters, but for a transform data resource it may just be a JSON blob of the output from another date resource.

In this video we’ll create a transform data resource that adds a bit of personalization to a list title. *NOTE: In this video when you hear me say spoke a couple of times, I mean scope, my brain wasn’t cooperating with me very well.*

That was a simple use case, but demonstrated the two main steps when creating a data resource:

  1. Create a data resource and add it to your page.
  2. Create an ACL granting execute access to the data resource.

More Resources

Make sure to check out the previous posts in this UI Builder series, and stay tuned for more posts every Wednesday through mid-March.

Have a UI Builder topic you’d like me to hit in a futuer post? Let me know on Twitter, LinkedIn, or sndevs.com slack (@btilton).

Comments