12/13/21 Improved Summary Panels: Breaking Change

What is a summary panel?

Is a component that can be available workflow detail page to edit and display the information belonging to a single Thing.


Summary details are added to the workflow experience Summarize Data.


What does this improve?

The summary panel was treated like a group of widgets so for each of the attributes shown on the panel the system was performing a query to fill data. This was an inefficient way to call data from the back end and more difficult to program the database connection as seen below.


What is the Solution?

The update treats the summary panel as one widget fetching all the data with only one query. This updates all the data with one query but also uses one query per attribute for autocompletes and format checking when editing data.


How this changes impacts the Front End

The settings generated for the components are updated and require fewer queries to fulfill the component, to take advantage of this change you will simply need to relaunch your prototype and export the code from the Kleeen IDE into your project.

How this change impacts the data connections

Now fewer queries are required and all the Kleeen generated parts are going to be updated as usual. The connectors inside apps/API/src/graphql/custom/widgetResolvers. will be excluded from updates by Kleeen.

This is because of the approach taken by Kleeen's code structure all files inside of the custom folders identified in the kleeen.json file will not be updated. It is normally recommended to identify folders that Kleeen should not update in the kleeen.json file.

How to identify the query for the Summary Panel

Each summary panel creates a different query (based on its id) the prefix for the queries are entity_detail and the easiest way to capture the name of the call is to navigate on the page that has the summary panel that you want to find out the call and look for the entity_detail query as seen below.


How to connect data to the new Summary Panels

  1. A new widget api resolver will need to be added for each summary panel in the application.
  2. The file that we need to add looks like the image below and will have the name based on the id for each summary panel.

The concept is that you move all the separated logic formerly in multiple calls to the single file and return the data with the next shape.


This allows you to integrate the component but use only one query. Below is an example of how the Front End expects the data, each key inside the data object represents an attribute for the summary panel item by attribute name. For a better understanding of the required shape check the summary panel query response as the image above.


Which files are no longer used?

Some of the files previously generated inside apps/api/src/graphql/custom are not going to be needed after this change, the easiest way to find those is to compare the files vs the ones exported in apps/api/src/graphql/generated/dataSources/widgetApi.ts (named WidgetApi) because that file is the real connection of each widget api.

If a file inside custom (apps/api/src/graphql/custom/widgetResolvers) is not imported and use it in WidgetApi can be deleted.

If you have any questions about this update please contact us at [email protected]