How to: Make Internal API Calls in Unqork

In this article, you’ll configure Unqork internal API calls to better understand how to use Unqork’s API works.

In this example, you make use of two modules:

• Schema Module: You’ll use a schema module to store your submissions. You'll reference the module ID for your schema module in your internal API calls.

• Submission Module: You'll use a submission module to collect the end-user's first name, last name, a joke of their choosing, and the joke’s answer.

Configure the Schema Module

Set up a schema module to store your submissions and reference its module ID in your internal API calls. To set up the schema module, configure four Hidden components. Schema modules only require fields that mirror the data-entry fields to store the data.

These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop four Hidden components onto your canvas.

2. In the Property ID and Label Text fields, enter the following for each component:

   #	Property ID	Label Text
   1	firstName	firstName
   2	lastName	lastName
   3	jokeQuestion	jokeQuestion
   4	jokeAnswer	jokeAnswer

3. Set Store Data to Database to (ON) for each component.

   You must enable Store Data to Database for each component in your Schema module for them to return in the API response.

4. Click Save & Close after adding each Hidden Component

5. Save your module.

This is how your schema module looks in the Module Builder:

With your Hidden components in place, your schema module is complete. Make note of the module ID for your schema module, though, because you'll need it to make your API calls later. You can find the module ID in the Express View URL. In the following example, identify the bolded text: https://trainingx.unqork.io/#/display/5ece83f7cf02e4020f247408.

Configure the Submission Module

The second module in this configuration is your submissions module. In this module, you’ll collect the end-user’s first name, last name, a joke of their choosing, and the joke’s answer. Each set of answers creates a single submission.

Configure the Initializer Component

Each of your API calls must reference your schema module. You can enter the module ID into every API call manually, but that's not a best practice. Instead, use an Initializer component to set the module ID for every new submission. The Initializer component stores the module ID in a Hidden component that you'll add in the next step. At some point, you might need to update the schema module ID. With this approach, you only have to update the module ID in one component, instead of several.

These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop an Initializer component onto your canvas.

2. In the Property ID and Canvas Label Text fields, enter initNewSubmission.

3. Set the Trigger Type as New Submission.

4. In the Outputs table, enter the following:

   Property ID	Type	Value
   moduleId	value	{your Schema module's unique module ID}

   The Property ID listed in the Outputs table corresponds to the Hidden component you’ll add in the next step. This is where the schema module ID is stored. In the Value column, enter your schema module's unique module ID. The image below displays the module ID from the sample schema module.

   

5. Click Save & Close

Configure the Hidden Component

Next, add the Hidden component referenced by the Initializer component. You'll reference this component later in this example to retrieve the module ID in your API calls.

1. Drag and drop a Hidden component onto your canvas, placing it below your initNewSubmission Initializer component.

2. In the Property ID and Label Text fields, enter moduleId.

3. Click Save & Close.

Configure the Panel Component

You need a portal for your end-user in your submissions module to collect the information. Then, use a Create Module Submission(s) API call to store submissions in your schema module.

You’ll configure a Panel component that acts as a container for the components involved in this stage of the configuration.

1. Drag and drop a Panel component onto your canvas, placing it below your moduleId Hidden component.

2. In the Title field, enter Create.

3. In the Property Name field, enter panelCreateModuleSubmissions.

4. Click Save & Close.

Configure the Columns Component

Next, add two columns using a Columns component to better organize the module.

1. Drag and drop a Columns component onto your canvas, placing it inside your panelCreateModuleSubmissions Panel Component.

2. In the Property ID field, enter colCreateSubmissions.

3. Click Save & Close.

Configure the Text Field Components

Add two Text Field components to collect your end-user's first and last name.

1. Drag and drop two Text Field components onto your canvas, placing one component in each column of the colCreateSubmissions Columns component.

2. In the Property ID and Label Text fields, enter the following for each component:

   #	Property ID	Label Text
   1	firstName	First Name
   2	lastName	Last Name

   The firstName field is in the first column, and the lastName field is in the second.

3. Click Save & Close after adding each Text Field component.

Configure the Text Area Components

Add two Text Area components to collect your end-user's joke and the answer to the joke.

1. Drag and drop two Text Area components onto your canvas, placing one component in each column of the colCreateSubmissions Columns component.

2. In the Property ID and Label Text fields, enter the following for each component:

   #	Property ID	Label Text
   1	jokeQuestion	Joke Question
   2	jokeAnswer	Joke Answer

   The jokeQuestion field is in the first column, and the jokeAnswer field is in the second.

3. Click Save & Close after adding each Text Area component.

Configure the Plug-In Component

Add a Plug-In component to run the Create Module Submission(s) API call. You'll map the data from your input fields into the call to create the submissions and store them in the schema module.

1. Drag and drop a Plug-In component onto your canvas, placing it below your colCreateSubmissions Columns component.

2. In the Property ID and Label Text fields, enter pluginCreateModuleSubmission.

3. In the Inputs table, enter the following:

   Property ID	Mapping
   firstName	data.firstName
   lastName	data.lastName
   jokeAnswer	data.jokeAnswer
   jokeQuestion	data.jokeQuestion

   

4. From the Internal Services drop-down, select Create Module Submission(s). The Data Source URL autopopulates.

5. In the Data Source URL field, replace {moduleId} with {{data.moduleId}}.

   This Plug-In component maps the data from your moduleId Hidden component into the Data Source URL.

   

6. Click Save & Close.

Configure the Button Component

Add a Button component to trigger the Plug-In component and the API call.

1. Drag and drop a Button component onto your canvas, placing it below the pluginCreateModuleSubmission Plug-In component.

2. In the Property ID field, enter btnCreateSubmission.

3. In the Label Text field, enter Create Submission.

4. Set the Action Type as Event.

5. In the Trigger on Click field, enter pluginCreateModuleSubmission.

   

6. Click Save & Close.

Here’s how the first part of the configuration looks in the Module Builder:

The above image uses optional HTML Element components to add a header and description in the Panel component.

Configure the Get Module Submissions API Call

Now that an end-user can create submissions, you must add functionality to view those submissions. There are a few options for GET API calls in Unqork. In this example, you'll use the Get Module Submissions call, which retrieves the data from your schema module. Then, you'll use the DevTools Console to view the submissions.

Configure the Panel Component

This Panel component acts as a container for the components involved in this section of the configuration.

1. Drag and drop a Panel component onto your canvas, placing it below your Create Panel Component.

2. In the Title field, enter Get Module Submissions.

3. In the Property Name field, enter panelGetModuleSubmissions.

4. Click Save & Close.

Configure the Plug-In Component

Add a Plug-In component to run the Get Module Submissions API call.

1. Drag and drop a Plug-In component onto your canvas, placing it inside your panelGetModuleSubmissions Panel component.

2. In the Property ID and Canvas Label Text fields, enter pluginGetSubmissionsCall.

3. In the Post Trigger field, enter dwfNestGetSubmissionsCall.

4. In the Inputs table, enter the following:

   Property ID	Mapping
   'created'	sortBy
   '-1'	sortOrder

   This configuration sorts the submissions in descending order, starting with the most recent. Use single quotes around the values in the Property ID field to indicate to the component that you're not referencing actual Property IDs. Instead, you're hardcoding these values into the API call.

5. In the Outputs table, enter the following:

   Property ID	Mapping
   getSubmissionsResponse	data

        

   

6. From the Internal Services drop-down, select Get Module Submissions. The Data Source URL autopopulates.

7. In the Data Source URL field, replace {moduleId} with {{data.moduleId}}.

   

8. Click Save & Close.

Configure the Hidden Component

Add a Hidden component to store the response of your API call.

1. Drag and drop a Hidden component onto your canvas, placing it below your pluginGetSubmissionsCall Plug-In component.

2. In the Property ID and Label Text fields, enter getSubmissionsResponse.

3. Click Save & Close.

Configure the Data Workflow Component

There are different ways to log the response of this call and display the data. In this example, you'll add a Data Workflow component to nest the submission data returned by your API call.

1. Drag and drop a Data Workflow component onto your canvas, placing it below your getSubmissionsResponse Hidden component.

2. In the Canvas Label Text and Property Name fields, enter dwfNestGetSubmissionsCall.

3. Click Save & Close.

Configure the Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.

2. Configure the operator’s Info window as follows:

   Setting	Selection
   Category	Input
   Component	pluginGetSubmissionsCall
   Required	Yes
   Source	Default

Configure the Col2Array Operator

1. Drag and drop a Col2Array operator onto your Data Workflow canvas.

2. Configure the operator’s Info window as follows:

   Setting	Selection
   Category	Col2Array
   Label
   Drop Empty	Yes
   Path	data.rawData
   Default Value

3. Connect the output port (right) of the Input operator to the input port (left) of the Col2Array operator.

Configure the Output Operator

1. Drag and drop an Output operator onto your Data Workflow canvas.

2. Configure the operator’s Info window as follows:

   Setting	Selection
   Category	Output
   Component	getSubmissionsAfterNesting
   Action	value

   You'll create the getSubmissionsAfterNesting Hidden component next. This Hidden component serves as the output for your Data Workflow.

3. Connect the output (right) port of the Col2Array operator to the input (left) port of the Output operator.

   

4. Click Save.

Configure the Hidden Component

You need another Hidden component to serve as the output for your Data Workflow. The component must exist in the module before you can add it as an output for your dwfNestGetSubmissionsCall Data Workflow component.

1. Drag and drop a Hidden component onto your canvas, placing it below your Data Workflow.

2. In the Property ID and Label Text fields, enter getSubmissionsAfterNesting.

3. Click Save & Close.

Configure the Button Component

Configure a Button component to trigger your Plug-In component.

1. Drag and drop a Button component onto your canvas, placing it below your getSubmissionsAfterNesting Hidden component.

2. In the Property ID field, enter btnGetSubmissions.

3. In the Label Text field, enter Get Submissions.

4. Set the Action Type as Event.

5. In the Trigger on Click field, enter pluginGetSubmissionsCall.

   

6. Click Save & Close.

Here’s how the second part of the configuration looks in the Module Builder:

You can use optional HTML Element components to add a header and description in the Panel component.

Configure the List Submissions for Dashboard API Call

You can also perform a List Submissions for Dashboard API call. This is the second GET API option you have in Unqork. This call is similar to Get Module Submissions, but it returns a flat array of data. Flat arrays work well as inputs for ViewGrid components. So, use List Submissions for Dashboard to see your submissions in your application instead of relying on the DevTools Console to view them.

Configure the Panel Component

Add a Panel component to act as a container for the components involved in this section of the configuration.

1. Drag and drop a Panel component onto your canvas, placing it below your Get Module Submissions Panel component.

2. In the Title field, enter List Submissions for Dashboard.

3. In the Property Name field, enter panelListSubmissions.

4. Click Save & Close.

Configure the Plug-In Component

Configure a Plug-In component to run the List Submissions for Dashboard API call.

1. Drag and drop a Plug-In component onto your canvas, placing it inside your panelListSubmissions Panel component.

2. In the Property ID and Canvas Label Text fields, enter pluginGetSubmissionsForDashboard .

3. In the Post Trigger field, enter dwfOutput.

   You'll create the dwfOutput Data Workflow component next.

4. In the Inputs table, enter the following:

   Property ID	Mapping
   moduleId	moduleId
   'jokeQuestion, jokeAnswer, firstName, lastName'	fields
   '-created'	sort

   

5. From the Internal Services drop-down, select List Submissions for Dashboard. The Data Source URL autopopulates.

6. Click Save & Close.

Configure the Data Workflow Component

Use a List Submissions for Dashboard call to retrieve an unnested array of data. That way, you can store the entire response in a Hidden component. Then, use a simple Data Workflow to separate the data.

1. Drag and drop a Data Workflow component onto your canvas, placing it below your pluginGetSubmissionsForDashboard Plug-In component.

2. In the Canvas Label Text and Property Name fields, enter dwfOutput.

3. Click Save & Close.

Configure the Input Data Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.

2. Configure the operator’s Info window as follows:

   Setting	Selection
   Category	Input
   Component	pluginGetSubmissionsForDashboard
   Required	Yes
   Source	Default

Configure the Output Data Operator

1. Drag and drop an Output operator onto your Data Workflow canvas.

2. Configure the operator’s Info window as follows:

   Setting	Selection
   Category	Output
   Component	listSubmissionsResponse
   Action	value

   You'll create the listSubmissionsResponse Hidden component next. AThis Hidden component serves as the output for your Data Workflow.

3. Connect the output port (right) of the pluginGetSubmissionsForDashboard Input operator to the input port (left) of the listSubmissionsResponse Output operator.

   

4. Click Save.

Configure the Hidden Component

Add a Hidden component to store the output for your Data Workflow.

1. Drag and drop a Hidden component onto your canvas, placing it below your dwfOutput Data Workflow.

2. In the Property ID and Label Text fields, enter listSubmissionsResponse.

3. Click Save & Close.

Configure the Button Component

Configure a Button component to execute the Plug-In component.

1. Drag and drop a Button component onto your canvas, placing it below your listSubmissionsResponse Hidden component.

2. In the Property ID field, enter btnListSubmissionsforDashboard.

3. In the Label Text field, enter List Submissions for Dashboard.

4. Set the Action Type as Event.

5. In the Trigger on Click field, enter pluginGetSubmissionsForDashboard.

   This step connects your Button component to the ViewGrid component that you'll add in the next step.

   

6. Click Save & Close.

Configure the ViewGrid Component

Lastly, configure a ViewGrid component to display the data retrieved using this API call.

1. Drag and drop a ViewGrid component onto your canvas, placing it below your btnListSubmissionsforDashboard Button component.

2. In the Title field, enter ViewGrid Submissions Response.

3. In the Property Name field, enter vgSubmissionsResponse.

4. In the Action field, enter null.

   Entering null in the Action field removes the default Submit button from your dashboard.

5. In the Inputs table, enter the following:

   #	ID	Required
   1	listSubmissionsResponse	(checked)

6. Complete the Display table as follows:

   ID	Formula	Heading	Type
   jokeQuestion		Question	string
   jokeAnswer		Answer	string
   firstName		Submitted By	string
   id		SubmissionId	string

   

7. Click Save & Close.

Here’s how the third part of the configuration looks in the Module Builder:

The image above uses optional HTML Element components, which allow you to display a header and description in the Panel.

Configure the Update Module Submissions Call

Now that you have added a way to create and view submissions, you must add functionality to update those submissions. Set up an Update Module Submissions API call in your submissions module to change the end-user's name or joke, if needed.

Configure the Panel Component

Add a Panel component to act as a container for the components involved in this section.

1. Drag and drop a Panel component onto your canvas, placing it below your Read Panel component.

2. In the Title field, enter Update.

3. In the Property Name field, enter panelUpdateModuleSubmissions.

4. Click Save & Close.

Configure the Columns Component

Next, add two columns using a Columns component to better organize the module.

1. Drag and drop a Columns component onto your canvas, placing it inside your Update Panel component.

2. In the Property ID field, enter colUpdateSubmissions.

   For this use case, you'll use the component’s default of two columns.

3. Click Save & Close.

Configure the Text Field Components

These Text Field components display the submission ID and the field you’re updating.

1. Drag and drop two Text Field components onto your canvas, placing them inside the left column of your colUpdateSubmissions Columns component.

2. In the Property ID and Label Text fields, enter the following for each component:

   #	Property ID	Label Text
   1	submissionIdUpdate	SubmissionId to Update
   2	firstNameUpdate	First Name

3. Click Save & Close for each component as you add it.

4. Drag and drop two more Text Field components onto your canvas. Place the Text Field components inside the right column.

5. In the Property ID and Label Text fields, enter the following for each component:

   #	Property ID	Label Text
   1	valueThatDoesntExist	Value That Doesn't Exist in Schema
   2	lastNameUpdate	Last Name

6. Click Save & Close for each component as you add it.

Configure the Text Area Components

Add Text Area components to update the joke question and the joke answer from the original submission data.

1. Drag and drop two Text Area components onto your canvas, placing one component in each column of the Columns component, below the Text Field components.

2. In the Property ID and Label Text fields, enter the following for each component:

   #	Property ID	Label Text
   1	jokeQuestionUpdate	Joke Question
   2	jokeAnswerUpdate	Joke Answer

   The jokeQuestionUpdate field is in the first column, and the jokeAnswerUpdate field in the second.

3. Click Save & Close for each component as you add it.

Configure the Plug-In Component

Add a Plug-In component to run the Update Module Submissions API call. You'll map the data from the input fields into the call to update the submissions in the schema module.

1. Drag and drop a Plug-In component onto your canvas, placing it below your colUpdateSubmissions Columns component.

2. In the Property ID and Label Text fields, enter pluginUpdateMOduleSubmission.

3. In the Inputs table, enter the following:

   Property ID	Mapping	Optional
   firstNameUpdate	data.firstName	(checked)
   lastNameUpdate	data.lastName	(checked)
   jokeAnswerUpdate	data.jokeAnswerUpdate	(checked)
   jokeQuestionUpdate	data.jokeQuestionUpdate	(checked)
   valueThatDoesntExist	data.valueThatDoesntExist	(checked)

   

4. From the Internal Services drop-down, select Update Module Submission. The Data Source URL autopopulates.

5. In the Data Source URL field, replace {moduleId} with {{data.moduleId}} and {submissionId} with {{data.submissionUpdate}}.

    

6. Click Save & Close.

Configure the Button Component

Add a Button component to execute the Plug-In component.

1. Drag and drop a Button component onto your canvas, placing it below your pluginUpdateModuleSubmission Plug-In component.

2. In the Property ID field, enter btnUpdateSubmission.

3. In the Label Text field, enter Update Submission.

4. Set the Action Type as Event.

5. In the Trigger on Click field, enter pluginUpdateModuleSubmission.

   

6. Click Save & Close.

Here’s how the fourth part of the configuration looks in the Module Builder:

The image above uses optional HTML Element components, which allow you to display a header and description in the Panel component.

Configure the Delete Module Submissions Call

There might be instances when you want to delete submissions from your schema module. You can add a Delete Submissions API call to achieve this task. You also might want to maintain the ability to restore those deleted submissions. Let’s take a look at how those work together and consider an example of what happens when you try to restore a deleted submission.

Configure the Panel Component

Add a Panel component to act as a container for the components involved in this section of the configuration.

1. Drag and drop a Panel component onto your canvas, placing it below your Update Panel component.

2. In the Title field, enter Delete.

3. In the Property Name field, enter panelDeleteModuleSubmissions.

4. Click Save & Close.

Configure the Columns Component

Add a Columns component to keep your components organized. Use the default setting of two columns.

1. Drag and drop a Columns component onto your canvas, placing it inside your Delete Panel component.

2. In the Property ID field, enter colDeleteSubmissions.

   Use the default setting of two columns in this example.

3. Click Save & Close.

Configure the Text Field Component

Add a Text Field component where you’ll enter the submission ID you want to delete.

1. Drag and drop a Text Field component onto your canvas, placing it in the left column of the colDeleteSubmissions Columns component.

2. In the Property ID field, enter submissionsIdDelete.

3. In the Label Text field, enter SubmissionId to Delete.

4. Click Save & Close.

Configure the Plug-In Component

Configure a Plug-In component to run the delete submissions API call.

1. Drag and drop a Plug-In component onto your canvas, placing it below your colDeleteSubmissions Columns component.

2. In the Property ID and Label Text fields, enter pluginDeleteMultipleModuleSubmissions.

3. In the Inputs table, enter the following:

   Property ID	Mapping
   submissionIdDelete	ids

   

4. From the Internal Services drop-down, select Deletes Multiple Module Submissions. The Data Source URL autopopulates.

5. In the Data Source URL field, replace {moduleId} with {{data.moduleId}}.

   

6. Click Save & Close.

Configure the Delete Submissions Button Component

Configure a Button component to trigger the pluginDeleteMultipleModuleSubmissions Plug-In component to delete submissions.

1. Drag and drop a Button component onto your canvas, placing it below your pluginDeleteMultipleMOduleSubmissions Plug-In component.

2. In the Property ID field, enter btnDeleteSubmission.

3. In the Label Text field, enter Delete Submission(s).

4. Set the Action Type as Event.

5. In the Trigger on Click field, enter pluginDeleteMultipleMOduleSubmissions.

   

6. Click Save & Close.

Configure the Get Deleted Submission Button Component

Configure a second Button component to trigger your Plug-In component to retrieve previously deleted submissions. This example demonstrates what happens when you try to retrieve a deleted submission.

1. Drag and drop a Button component onto your canvas, placing it in the right column of your colDeleteSubmissions Columns component..

2. In the Property ID field, enter btnGetDeletedSubmission.

3. In the Label Text field, enter Get Deleted Submission.

4. Set the Action Type as Event.

5. In the Trigger on Click field, enter pluginGetDeletedSubmission.

   This step sets the button to trigger the Plug-In component you'll add in the next step.

6. From the Button Style drop-down, select Info.

   

7. Click Save & Close.

Configure the Plug-In Component

Configure a second Plug-In component to run the GET call to retrieve a deleted submission.

1. Drag and drop a Plug-In component onto your canvas, placing it in the right column, below your btnGetDeletedSubmission Button Component.

2. In the Property ID and Label Text fields, enter pluginGetDeletedSubmission.

3. From the Internal Services drop-down, select Get Module Submission. The Data Source URL autopopulates.

4. In the Data Source URL field, replace {moduleId} with {{data.moduleId}} and {submissionId} with {{data.submissionDelete}}.

   

5. Click Save & Close.

Configure the Restore Deleted Submissions Button Component

Configure a third Button component to trigger your Plug-In component to restore previously deleted submissions.

1. Drag and drop a Button component onto your canvas, placing it in the right column, below your pluginGetDeleteSubmission Plug-In Component.

2. In the Property ID field, enter btnRestoreDeletedSubmission.

3. In the Label Text field, enter Restore Deleted Submission.

4. Set the Action Type as Event.

5. In the Trigger on Click field, enter pluginRestoreDeletedModuleSubmission.

   This sets the button to trigger the Plug-In component you'll add in the next step.

6. From the Button Style drop-down, select Success.

   

7. Click Save & Close.

Configure the Plug-In Component

Configure a third Plug-In component to restore previously deleted submissions.

1. Drag and drop a Plug-In component onto your canvas, placing it in the right column, below your btnRestoreDeletedSubmission Button Component.

2. In the Property ID and Label Text fields, enter pluginRestoreDeleteModuleSubmission.

3. Set the Trigger Type to Manual.

4. From the Internal Services drop-down, select Restore a Deleted Module Submission. The Data Source URL autopopulates.

5. In the Data Source URL field, replace {moduleId} with {{data.moduleId}} and {submissionId} with {{data.submissionDelete}}.

   

6. Click Save & Close.

7. Save your module.

Here’s how the final configuration looks in the Module Builder:

The image above uses optional HTML Element components, which allow you to display a header and description in the Panel component.