How to configure data from API on card in vDesigner1.0?

Please explain with configuration?

4 Likes

To fetch data on card in vDesigner 1.0:

  1. Start with configuring a card:
    In the left navigation pane, click Configure Landing Page, and the navigation panel
    expands. In the panel, click Card, and the Card Definition Form dialog box opens.
    You can fill the required details,for e.g.
  • Header: Enter the title or header name of the card. → ADMIN USERS
  • Detail Text: enter the subheading or brief text about card ->List of Admin users
  • Sort Sequence: Enter the sequence number of the dashboard type → 2
  • Card Group Name: Entering this value specifies that the card will be displayed on the
    dashboard → HOME
  • Card Name: enter the card’s name.-> ADMIN USERS
  • Template Id: If you want to show your card in the square form , enter 3
  • Card Image URL: Enter the URL of Image that you want to show on your cards →
    https://cdn-icons-png.flaticon.com/512/552/552721.png
    click on save.
  1. Configure the required service on vConnect .
    for e.g. i am fetching an API which gets count as data.
    For Accounts count API
  • Create a new API in vConnect called “ACCOUNTS_NUM”
  • Under the End Point details tab → Create new Env Variable called “API_GET_ACCOUNT_NUM” with value “http://{DOMAIN}:{PORT}/accounts/count”
  • Click the Method list to select the GET method
  • Select “Is the URL have dynamic path variables?”
  • Under the Path Param Details tab
    a. DOMAIN as Env → APP_DOMAIN
    b. PORT as Env → APP_PORT
    Export to service.
  1. Configure API on cards:

In the left navigation pane, click TEST_APP, and the App Definition Form dialog box opens.
In the dialog box, enter values in the respective boxes as follows:

  • Dashboard Create Action ID: Here you can display the List of Task, You can search and
    select API integration Task.

  • When you click API name, you can see all services in the right panel. You can choose
    Get_cards . Then In name you can give space, select FIXED in the Source Type list and
    then give space in value.

  • In Response Parameters,
    -API name: ACCOUNTS_NUM
    -Name: count
    -Absolute JSON path: $.TEMP_OBJ.ACCOUNTS_NUM_COUNT_DATA

  1. Map to card :
    These are the steps for mapping an Absolute JSON path in Cards:
    In the right navigation panel, Click on Card.

Click on edit card configuration:

  • Detail Text: enter the subheading or brief text about card ->List of Accounts[COUNT]
  • Card view Table Name: Enter the path for your count Function. → $.TEMP_OBJ.ACCOUNTS_NUM_COUNT_DATA

NOTE: Action Type: Choose Perform User Defined Action - for configuring the action that the user can perform on the card

5 Likes