Note: This is part two of a series of articles where we will develop Custom Components with the Now Experience UI Framework. This series starts with two articles about custom GraphQL APIs which we will use to fetch data from the platform for our component. Custom Components - Custom GraphQL API Part1
In part one we created a custom GraphQL API that returns Requests opened by a specified contact. Now we will include the Requested Items and Variables.
The following picture shows the structure of the needed objects.
1. We need to extend the schema of our API. We add the items to the Request type
items: [RequestedItem]
2. We create a type RequestedItems
type RequestItem{
sys_id: ID
number: String
stage: String
cat_item: String
stages: [String]
variables: [CatalogVariable]
}
3. We create the Type CatalogVariable that we have used in the RequestedItem type
type CatalogVariable{
value: String
question_text: String
type: String
}
4. We need to create a Scripted Resolver for the Requested Items
The env object, that is passed into the Scripted Resolvers, provides the function getSource() to access the parent object. We use this function in the resolver to get the sys_id of the Request.
5. We create the Scripted Resolver for the Variables
6. The last part is to create the mappings for the new resolvers
Done! Now we can use our Custom GraphQL API to get the Requests, Requested Items, and Variables. All with only one query.
The Resolver Scripts for the Request and the Requested Item return a GlideRecord object. In the example request above we can see that this results in an object with display_value und value for the fields. We can use the @source directives in our schema to map the fields to value or display_value in the GlideRecord. If we only need the display_values the schema would look like this:
In the next article, we are going to use this GraphQL API within a Custom Component that we are going to create, and display the information in the Contextual Side Panel for contacts.
