How to fetch the data from an API and display it on the screen

vFlow
, , , ,
1

How to fetch the data from an API and display it on the screen on any component.

1 Like
2

To fetch the data from an API and display it on the component, You will have to apply API task for that.

vFlow-> Task group

  1. Add new Task group. Provide name.
  2. Add task -‘API’. Provide basic details into it.
  3. In configuration section : Write the name of ‘service’ in it(Make sure to write the exact same name as written in vConnect).
  4. In C2S: Have to provide the key name , Type and data path from where you have to fetch the data from the client(Specifically in this case, keep C2S blank).
  5. In S2C: Provide Key name, Type and Data path as per the API object.
    For instance:
Key value: getVal("tempObject.dashboard.accounts")
Type- JSON
Data Path - getVal("ACCOUNTS_NUM.count")
  1. Submit the task.

To get the component refreshed whenever any changes made to data, You will have to add ‘INVOKE_ENTITY’.

  1. Add another task within the same task group.
  2. Provide basic details in that task.
  3. In configuration section : Add the required Queue component in the ‘component Id section’.
  4. Submit the task & Task group.

Create Event

  1. Add new ‘On Load’ event.
  2. Bind that task group into this event.
  3. Map this Event in the Dependents section of the page.
  4. Submit the page, Publish it and sync it with release manager.

Changes to be made on component level:

  1. Edit the properties section of an element of queue component and select the ‘Show Count’ option.
  2. Also can provide the default value as well.

For instance: The value is provided on the Queue component named USERS as 12.

For reference:
For reference:1366×768 95.3 KB

1 Like
3

To fetch the data from an API and display it on the component, You will have to apply API task for that.

vFlow-> Task group

  1. Add new Task group. Provide name.
  2. Add task -‘API’. Provide basic details into it.
  3. In configuration section : Write the name of ‘service’ in it(Make sure to write the exact same name as written in vConnect).
  4. In C2S: Have to provide the key name , Type and data path from where you have to fetch the data from the client(Specifically in this case, keep C2S blank).
  5. In S2C: Provide Key name, Type and Data path as per the API object.
    For instance:
Key value: getVal("tempObject.dashboard.accounts")
Type- JSON
Data Path - getVal("ACCOUNTS_NUM.count")
  1. Submit the task.

To get the component refreshed whenever any changes made to data, You will have to add ‘INVOKE_ENTITY’.

  1. Add another task within the same task group.
  2. Provide basic details in that task.
  3. In configuration section : Add the required Queue component in the ‘component Id section’.
  4. Submit the task & Task group.

Create Event

  1. Add new ‘On Load’ event.
  2. Bind that task group into this event.
  3. Map this Event in the Dependents section of the page.
  4. Submit the page, Publish it and sync it with release manager.

Changes to be made on component level:

  1. Edit the properties section of an element of queue component and select the ‘Show Count’ option.
  2. Also can provide the default value as well.

For instance: The value is provided on the Queue component named USERS as 12.

For reference:
For reference:1366×768 95.3 KB

2 Likes