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.

Custom Components - Use GraphQL and Contextual Side Panel