Actions

Action - is a process that changes data in your app. They could be very different: from simple navigation to other parts of application to the modifications using JavaScript.

Below you can find how to create an action and what types of actions are available to you.  

You can create an action on the tab “Data” in the left menu.

To create an action click on the Add new icon

For a new action you need to set up a name and at least one step. On trigger the steps will be executed one after another from top to bottom. You can add steps with the plus icon:

There are several types of steps:

  1. Toggle sidebar
  2. Code
  3. HTTP request
  4. Save data to App state
  5. Navigation

Let’s take a look a each of them:

Toggle sidebar

This action is dedicated for the interaction with the side bar if you have one in your application.

You can set  one of the 3 states for action:

  1. Open - the side bar will be opened on trigger
  2. Close - the side bar will be closed on trigger
  3. Toggle - the side bar will be opened if it is closed and closed if it is open.

HTTP request

This action is dedicated for setting up a HTTP request. It is your main action to receive or send data to a backend of your application.

The HTTP request has following parameters:

  1. Method
  2. URL
  3. Header name
  4. Header content
  5. Body (where applicable)
  6. Query parameters (where applicable)

You can select the method of the HTTP request from the list:

  1. GET
  2. POST
  3. DELETE
  4. PUT
  5. HEAD
  6. OPTIONS
  7. PATCH

You can have more than one header in the request. Add as many header as you need with the button “Add new header“:

If you created some of the header by mistake you can just delete them with the delete icon:

If you click on the field “Header name“ you can see the list of most used header names. You can select one to set it as a name of the header:

Query parameters work in the same way as headers, you can add/delete them at the tab “Query Params”:

Code

You can modify application data with the action “Code“. It this step you can use the JavaScript code.

Save data to App state

To properly manage the data from different steps: code, HTTP requests you will need variables. We have a special type of variables in UI Bakery : “App state“. This step assigns the value from the field “Value“ to the selected variable. For more info about App state variables see the section below.

In the field Value you can place JavaScript code.

Navigation

In this step you can set a URL address. The application will navigate user to this URL when they trigger the step.

You can set the desirable URL in the field “Page path“.

You can also add/edit/delete query parameters to the set page path.

Need some help?

Didn't find something here? Simply drop us a line at contact@uibakery.io