Use GraphQL Data in Operations Hub

This topic covers configuring a data source and query, and binding the values to widgets, using one of two supported approaches.

Before you begin

In the following steps, you will create the data source and query in Operation Hub classic, and then configure the App using the new Operations Hub layout.

About this task

There are two ways to configure GraphQL queries in Operations Hub:
Without Filtering Applies when you want to use a static query without user input.
With Filtering Applies when you want to allow users to enter filter criteria at runtime.

Procedure

  1. Log in to the Operations Hub classic version.
  2. Create the GraphQL data source.
    Use the values below to configure your GraphQL data source in Operations Hub:
    Field Enter This Value
    Base URL https://webclient.graphql.your server hostname
    Auth Type Select OAuth
    Auth Grant Type Select Password
    Auth URL https://uaa.graphql.your server hostname/uaa/oauth/token
    Auth Client Id, Auth Client Secret, Username, and Password For valid credentials, contact GE Vernova Support.


  3. Save and exit the data source screen.
  4. Create the GraphQL query.
    • If you want to create a static query that does not depend on user input, proceed with the steps described in GraphQL Without Filtering.
    • If you want to create a query that accepts runtime input, proceed with the steps described in GraphQL With Filtering.

GraphQL Without Filtering

Create the GraphQL query using body parameters only.

Procedure

  1. Use the values below to configure your GraphQL query in Operations Hub:
    1. Add general details:
      Field Enter This Value
      Data Source Select the GraphQL data source you configured in the previous steps.
      Query URL /graphql


    2. Add Body Parameters:
      Field Enter This Value
      Value Key payload
      Type Select Fixed Value
      Browse Schema Open the schema browser and select the check boxes for the following:
      Tip:
      Use the keyword product query in the search bar to find the fields faster.
      • ProductQuery > content > productFamily > id
      • ProductQuery > content > id
      • ProductQuery > content > productCode
      • ProductQuery > content > productDescription
      • ProductQuery > content > productFamilyDesc


    3. Execute the GraphQL query and create entity.
    4. Set the entity created from results.


    5. Select output data fields for the query.
    6. Save and exit the query screen.
  2. Log in to Configuration Hub and access the Operations Hub new layout.
  3. Create an App and App Page.
  4. On the page, configure the GraphQL query as follows:
    1. Go to the Data tab and add the GraphQL query.
      See Data Tab


    2. Go to the Page Data tab, select the GraphQL query and set these properties:
      • Select the Auto-update check box.
      • Select the SubmitOnLoad check box.
      • Select the SubmitOnChange check box.
      See Page Data Tab


  5. Drag and drop DataGrid on the page and configure its properties:
    1. For Input, choose the Query option, from dropdown select the GraphQL query.
    2. Select + Add All to include all the query output fields.


  6. Select Save on the Configuration Hub toolbar.
  7. To preview, launch the App at runtime and verify the results.

GraphQL With Filtering

Create the GraphQL query using both variables and body parameters.

Procedure

  1. Use the values below to configure your GraphQL query in Operations Hub:
    1. Add general details:
      Field Enter This Value
      Data Source Select the GraphQL data source you configured in the previous steps.
      Query URL /graphql
    2. Add GraphQL Variables:
      Field Enter This Value
      Key filter
      Type Select Input Field
      Default or Test Value {}


    3. Add Body Parameters:
      Field Enter This Value
      Value Key payload
      Type Select Fixed Value
      Browse Schema Open the schema browser and select the check boxes for the following:
      Tip:
      Use the keyword product query in the search bar to find the fields faster.
      • ProductQuery > content > productFamily > id
      • ProductQuery > content > id
      • ProductQuery > content > productCode
      • ProductQuery > content > productDescription
      • ProductQuery > content > productFamilyDesc
    4. Execute the GraphQL query and create entity.
    5. Set the entity created from results.
    6. Select output data fields for the query.
    7. Save and exit the query screen.
  2. Log in to Configuration Hub and access the Operations Hub new layout.
  3. Create an App and App Page.
  4. On the page, configure the GraphQL query as follows:
    1. Go to the Data tab and add the GraphQL query.
      See Data Tab
    2. Go to the Page Data tab, select the GraphQL query and set these properties:
      • Select the Auto-update check box.
      • Select the SubmitOnLoad check box.
      • Select the SubmitOnChange check box.
      See Page Data Tab
  5. Drag and drop these widgets on the page and configure their properties:
    Text Input
    1. For Output Value, choose the Query option, from dropdown select the GraphQL query.
    2. To set target data, from Input Field dropdown, select filter.
    DataGrid
    1. For Input, choose the Query option, from dropdown select the GraphQL query.
    2. Select + Add All to include all the query output fields.
  6. Select Save on the Configuration Hub toolbar.
  7. To preview, launch the App at runtime and verify the results.