Use a direct URL

Introduction

The direct URL is a way to insert data into our system. As it is explained in this post, there are several types of direct URLs.

In this section we are going to cover the type To get a Hosted page content. This option basically renders a hosted page content that will kick off a flow.

In this example we are going to retrieve results from the Social Searcher API and display them later to the user.

In order to achieve this, we are going to create a hosted page (our direct URL) with a simple form which will contain just a text input field. Upon form submission, we will show a loading screen while the flow runs the needed process and finally we will display the results.

These are the steps that are going to be covered:

  1. Set up our data scheme
  2. Create our interface
  3. Install and configure the needed apps
  4. Create conditions
  5. Design our template and content
  6. Build the flow
  7. Create the direct URL

Set up our data scheme

Our data scheme must basically look as follows:

{
   "media_query": "",
   "loading": ""
}

media_query: this will contain the search value that we will input in the form.

loading: this is a flag that we will use in the conditions to know if the page is loading or not.

For more information on how to set up our JSON data scheme, please visit this link.

Create our interface

The next step is to set up the structure of the data that our interface will receive and map it against our data scheme.

In this example we are going to call it Social Media and it is going to use exactly the same payload as our data scheme. Our mapping should look as follows:

The scope available must be only record in the authorization tab.

For further information on how to create an interface, please refer to this page.

If you need to know more about how to configure an interface, please visit this post.

Install and configure the needed apps

We need to install and configure three apps:

  1. SocialSearcher: this will retrieve the information from the API.
  2. Update Variables: this will reset our loading flag once the results are retrieved from the API. Please visit this link for more information.
  3. Hosted pages: the only function that we need from this app is Feedback to a direct URL, which will send the user from the loading screen to the final view where the results are displayed.

For further information on how to install an app, please refer to this page.

If you need to know more about how to configure an app, please visit this post and if you need more information about how to configure a function, please refer to this link.

Create conditions

Now we are going to create the conditions that we will later on apply in the hosted page template. These conditions will determine which layer will be displayed:

  1. insert data: this condition will be applied to the form where the user must enter the search value:
  2. page is loading: this will show the loading screen:
  3. results retrieved: this will be used for the final layer where the results are displayed:

For more information on how to create a condition, please refer to this link.

Design our template and content

Now we have to create our hosted page template. You can download it by clicking on this link.

If you don’t know how to create a template, please go to this link.

Our hosted page template will be composed of three different layers (<div> elements):

  1. The screen where the user must enter the search value:
    <div class="main-wrapper" attr-condition="insert data">
       ...
    </div>

    Our data scheme variables @data.media_query@ and @data.loading@ will be updated upon form submission in this step.

  2. The loading screen:
    <div class="main-wrapper" attr-condition="page is loading">
       ...
    </div>

  3. The final view where the results will be displayed:
    <div class="main-wrapper" attr-condition="results retrieved">
       ...
    </div>

If you need to know more about the attributes that are used in this hosted page template, please refer to this post.

Once we are done with this, we create a new hosted page content based on this template that we just created. It is important to keep in mind that we need to publish this content in order to be able to use it in our direct URL.

Build the flow

The last thing that we need to configure before being able to set up our direct URL is the flow that is going to be kicked off by it.

This flow is going to execute these three functions:

  1. Social Searcher: this will retrieve the data from the Social Searcher API. The configuration should be as follows:
  2. Reset Flag: this is a custom name that we have assigned to the Update Variables function. It will clear the loading flag of our data scheme (@data.loading@). The configuration should be as follows:
  3. Feedback to a Direct URL: this function belongs to the Hosted Pages app. It will redirect the user from the loading screen to the final view where the results are displayed. In our case it will basically reload the current page. We will need to create the direct URL first before being able to fully configure this function:

If you need more information on how to create a flow, please visit this link.

Create the direct URL

Finally, we can start setting up our direct URL. To do this, we go to the direct URL overview and we click on the button “New Direct URL”:

This will take us to the next screen, where the following parameters must be specified:

  1. Name: the name of our direct URL.
  2. Interface: this defines the payload that our direct URL will receive.
  3. Flow: this is the flow that will be triggered by our direct URL.
  4. Type: to get a Hosted Page content.
  5. Content: the content to be displayed by the direct URL.
  6. Number of visits: this parameter is optional and determines the maximum number of visits allowed to this page.
  7. Period: this must be specified only if you set a maximum number of visits.

Once we have configured it, we click on the button “Create”. This will generate our direct URL, which will be shown as below:

And that’s all! Now we can simply copy and paste this URL into any browser and start testing our process.

Finalizing

If we open the direct URL, submit the form and after that, we go to our My Data section, we will realize that a new data record has been pushed into our system.

Well done! Now you have a direct URL fully working.