---
description: React to user actions
---

# Create user actions: switch screens, change data and make API calls

Assign any platform actions to any app user actions:

| **USER ACTIONS** that can be processed by platform                                      | **PLATFORM ACTIONS** assignable to user actions                                                                                                                                                                              |
| --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button click** [\[Step by step example →\]](#add-actions-to-buttons-images-and-links) | **Go to** screen - redirect user to another app screen, back to previous screen or to external URL.                                                                                                                          |
| **Image click** [\[Step by step example →\]](#add-actions-to-buttons-images-and-links)  | **Scroll to** - scroll to top / bottom of the current screen.                                                                                                                                                                |
| **Link click** [\[Step by step example →\]](#add-actions-to-buttons-images-and-links)   | **Create Event -** save files and data using Hashtags as **Event** in the platform events table. [\[Step by step example →\]](#create-event-and-save-related-data)                                                           |
| **App screen refresh** [\[Step by step example →\]](#add-actions-to-screens)            | **Save to Object column** - store data using Hashtags in **Object's** particular column. [\[Step by step example →\]](#save-data-to-current-object-on-button-click)                                                          |
|                                                                                         | **Execute Operations** - execute selected operation on button click. [\[Step by step example →\]](#execute-api-operation-on-button-click)                                                                                    |
|                                                                                         | **Set Variable** - create variable on button click. Variables store temporary data which can be used in other parts of the platform via Hashtags links.[ \[Step by step example →\]](#set-platform-variable-on-button-click) |

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

#### ADD ACTIONS TO BUTTONS, IMAGES & LINKS

1. Open any app you have
2. Add [**Button**](../../../references/intro-placeholder/constructor_elements#button)**,** [**Image**](../../../references/intro-placeholder/constructor_elements#image) or [**Link**](../../../references/intro-placeholder/constructor_elements#link) element to an app screen
3. Click on it on the screen
4. Click **Actions** button on the right hand side
5. Select the necessary action from **Add new action** dropdown.

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/4jb98oxf8g/1559496289331/screen-shot-2019-06-02-at-8-22-06-pm.png)

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

#### ADD ACTIONS TO SCREENS

1. Mouse over any of **User screens** on the bottom of **Constructor**
2. Select **Edit** screen settings by clicking the **pen**![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/4jb98oxf8g/1559496362571/image.png)
3. Click **Actions** button on the right hand side on **Constructor** screen
4. Select the necessary action from **Add new action** dropdown.

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

#### CREATE EVENT AND SAVE RELATED DATA

In this example we create[ **Text Input**](../../../references/intro-placeholder/constructor_elements#text-input-and-text-area) and[ **Button**](../../../references/intro-placeholder/constructor_elements#button) which saves the data from the text input to [**Event**.](../../references/intro-placeholder/events)

**How to set it up:**

1. Open any app you have and click **Add screen**
2. Drag and drop **Text Input** element, set properties:
   * **Backendname** = _Email_
   * **Placeholder** = _Enter your Email_
3. Drag and drop another **Text Input** element, set properties:
   * **Backendname** = _Question_
   * **Placeholder** = _Enter your question_
4. Add **Button** element to app screen, set properties:
   * **Backendname** = _Contact_
   * **Caption Button** = _Contact me_
5. Click **Actions** button on the right hand side
6. Select **Create Event** from **Actions** dropdown
7. Name the action as _Contact Action_
8. In **Data** table click **Add item** and set:
   * **Key** = _Email_
   * **Value** = _#Backendname:Email#_
9. Click **Add Item** and add another pair:
   * **Key** = _Question_
   * **Value** = _#Backendname:Question#_

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/4jb98oxf8g/1559567430496/image.png)

1. Click **Save**
2. Click **Save Screen**
3. Click **Preview** to launch the app from the current screen
4. Fill in **Text Input** and submit the data
5. Get back to **Constructor**
6. Check the data stored in **Events:**
   * Click on **Backend** in the header to get to Events table
   * Click on the row with the last event
   * Check your data in **Contact action** section.

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/4jb98oxf8g/1564997190755/.png)

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

#### SAVE DATA TO CURRENT OBJECT ON BUTTON CLICK

In this example we create [**Text input**](../../../references/intro-placeholder/constructor_elements#text-input-and-text-area) and [**Button**](../../../references/intro-placeholder/constructor_elements#button) which saves the data from text input to **Name** and **Email** columns in [**Objects**](../../references/intro-placeholder/objects).

**How to set it up:**

1. Open any app you have and click **Add screen**
2. Drag and drop **Text Input** elements, set properties:
   1. **Backendname** = _Name_
   2. **Backendname** = _Email_
3. Add **Button** element to app screen, set properties:
   1. **Caption button** = _Send_
4. Click **Actions** button on the right hand side
5. Select **Save to Object Column** action from **Actions** dropdown
6. In **Data** table click **Add item** and set **Column name** and **Value** data:
   1. **Name** = _#Backendname:name#_
   2. **Email** = _#Backendname:email#_
7. Click **Save**
8. Click **Save Screen**

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/4jb98oxf8g/1555053400430/screen-shot-2019-04-12-at-11-22-04-am.png)

&#x20;   9\. Click **Preview** to launch the app from the current screen

&#x20;  10\. Fill in **Text Input** and submit the data

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/4jb98oxf8g/1555049922428/image.png)

&#x20;  11.Get back to **Constructor**

&#x20;  12\. Click **Objects** in the header to check the data stored in Object tabl&#x65;**.**

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/4jb98oxf8g/1555050253019/image.png)

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

#### EXECUTE API OPERATION ON BUTTON CLICK

1. Pick **Execute Operations** from **Add new action** dropdown list
2. Pick an existing оperation from **Add operation** drop down list.
3. Click **Save**
4. Click **Save Screen.**

{% hint style="info" %}
Note: you need to create the operation **before** calling it. Please refer to [Use any external & internal API ](https://mobsted-2.gitbook.io/knowledge-base/use_any_internal_and_external_api)article for more info.
{% endhint %}

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/4jb98oxf8g/1554976867498/ezgif-com-video-to-gif-5.gif)

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

#### SET PLATFORM VARIABLE ON BUTTON CLICK

Variables store temporary data which can be used in other parts of the platform via [Hashtags](../../references/intro-placeholder/hashtags) links.

1. Drag and drop[ **Button**](../../../references/intro-placeholder/constructor_elements#button) element to any screen you have
2. Click **Actions** button on the right hand side
3. Pick **Set** **variable** from **Add new action** dropdown list
4. Click **Add item** under the **Variables** label
5. **Name** your variable
6. Use any combination of [Hashtag](https://kb.mobsted.com/article/9v4k7sfkq1-hastags) link to set the variable's value
7. Add as many **Name/Value** pairs as you need. **Add Item** button will appear each time you add and fill in **Name/Value** fields.
8. Click **Save**
9. Click **Save Screen.**

![](https://storage.googleapis.com/helpdocs-assets/jyme83anlw/articles/4jb98oxf8g/1554977028974/ezgif-com-video-to-gif-6.gif)

&#x20;Please, check [Variables](../../references/intro-placeholder/variables) article for more info.

####

#### MENTIONED ARTICLES

* [Constructor elements](../../references/intro-placeholder/constructor_elements)
* [Hashtags](../../references/intro-placeholder/hashtags)
* [Objects](../../references/intro-placeholder/objects)
* [Use any external & internal API](use_any_internal_and_external_api)
* [Events](../../references/intro-placeholder/events)
* [Variables](../../references/intro-placeholder/variables)
