Configure an app to use ERPx API resources

This example shows how to configure an app where the user can:

Suppliers app

All the data is retrieved and updated using the ERPx API resource.

Warning: For the ERPx API resource to work properly in the end-user app, the user must have access to the ERPx Public APIs and to the specific endpoints you have used. Go to the Public API access (XAG005) window to check your user's configuration.

To start:

  1. Select My Apps from the Extension Kit portal main menu.
  2. Select the Create new app button and name your app.
  3. Select the Create button.

Create an app

Configure the app layout

IMPORTANT: The components and resources have dependencies between them. To configure this app, you must go from the Canvas tab to the Resources tab and the Logic flow tab frequently.

Resources

Go to the Canvas tab:

App in canvas

Configure the Text component

In this example we configure the component as follows:

Go to the Resources tab next to canvas:

After setting our UI, let's configure our first resource to retrieve supplier data:

Create the Suppliers GET resource

To configure the resource, follow these steps:

  1. Select the Plus (+) button on top of the left panel to create a new resource.
  2. Select the new resource on the left panel.
  3. Select the Pencil icon to change the name to 'Suppliers- GET'
  4. Select ERPx API from the Type menu on the right and configure:

    1. Configuration section: - API endpoint: Open the dropdown and select objects/suppliers - Method: Open the dropdown and select GET.

    2. Parameters section: - orderBy: Enter the text: supplierName.

Go to the Logic flow tab next to resources:

To trigger the resource when the app is launched, follow these steps:

  1. Drag the On launch event to the viewport.
  2. Drag the HTTP Request action to the viewport and connect it to the On launch event.
  3. Select HTTP Request action in the viewport to see the properties panel to the right.
  4. Open the HTTP dropdown.
  5. Select the resource, for this example Suppliers GET(res1).

    Logic flow

Go back to the Canvas tab:

Now, we need to continue configuring some of our components.

Configure the Filter select component

In this example we configure the component as follows:

Go back to the Resources tab:

Let's create our second and third resources.

Create the Suppliers GET-ID resource

To configure the resource, follow these steps:

  1. Select the Plus (+) button on top of the left panel to create a new resource.
  2. Select the new resource on the left panel.
  3. Select the Pencil icon to change the name to 'Suppliers GET-ID'
  4. Select ERPx API from the Type menu on the right and configure:

    1. Configuration section: - API endpoint: Open the dropdown and select suppliers/{supplierId} - Method: Open the dropdown and select GET.

    2. Parameters section: - supplierId: Enter {{supplierfilter.value}} or use the Plus (+) button to display the Templating dropdown to navigate to the value of the supplierfilter component like this: Plus(+) button --> fields --> supplierfilter --> value.

      Templating dropdown

Note: ERPx API resources that use the GET method and have dependencies (Liquid in URL, parameters, headers) do not need to be configured in the Logic map or the Logic flow. The call is made through use of the component that is referenced.

Create the Countries resource

To configure the resource, follow these steps:

  1. Select the Plus (+) button on top of the left panel to create a new resource.
  2. Select the new resource on the left panel.
  3. Select the Pencil icon to change the name to 'Countries'
  4. Select ERPx API from the Type menu on the right and configure:

    1. Configuration section: - API endpoint: Open the dropdown and select objects/countries - Method: Open the dropdown and select GET.

    2. Parameters section: - filter: Enter the text: language eq 'EN'. - orderBy: Enter the text: countryName.

Go to the Logic flow tab next to resources:

To trigger the resource when the app is launched, follow these steps:

  1. Drag the HTTP Request action to the viewport and connect it to the On launch event.
  2. Select HTTP Request action in the viewport to see the properties panel to the right.
  3. Open the HTTP dropdown.
  4. Select the resource, for this example Countries (res3).

    Logic flow

Go back to the Canvas tab:

Let's continue with some more components.

Configure the Text input component

In this example we configure the components as follows:

Configure the Supplier ID text input

Configure the Supplier name text input

Configure the Select component

In this example we configure the components as follows:

Go back to the Resources tab:

Now, we will configure the last resource for our app.

Create the Update supplier resource

To configure the resource, follow these steps:

  1. Select the Plus (+) button on top of the left panel to create a new resource.
  2. Select the new resource on the left panel.
  3. Select the Pencil icon to change the name to 'Update suppliers'.
  4. Select ERPx API from the Type menu on the right and configure:

    1. Configuration section:

      • API endpoint: Open the dropdown and select suppliers/{suppliersId}
      • Method: Open the dropdown and select PATCH.
    2. Parameters section:

      • supplierId: Enter {{res2.supplierId}} or use the Plus (+) button to display the Templating dropdown to open the Suppliers GET ID resource and to navigate to the supplierId property.
    3. Content definition section:

      • Body Data Type: Select JSON from dropdown.
      • Content: Enter the JSON. For this example, you can copy and paste the JSON below.

        Note: You can enter value property with Liquid or using the Plus (+) button to display the Templating dropdown to navigate to the component's value through the fields menu.

      [{"op": "replace","path": "/supplierName", "value": "{{suppliername.value}}" }, { "op": "replace","path": "/countryCode","value": "{{countries.value}}" }]

Note: This resource is triggered in the Logic map in the Button component. See Button component.

In the following image you can see the Resource tab with all the ERPx resources.

Resources

Go back to the Canvas tab:

Let's configure our last component.

Configure the Button component

In this example we configure the components as follows:

You can see the final result in the following image:

App in canvas

Note: See Components and events and actions for more details.

Finally, after configuring the components and the resources, select the Save draft button and preview you app.