How YOU can build your first Low code app using Microsoft Power Platform
Tags: beginners, tutorial, powerapps, lowcode
Published: 2022-08-08 13:34:32

---
title: How YOU can build your first Low code app using Microsoft Power Platform
published: true
description: build your first Canvas app for Microsoft Power platform, learn about control, events and state
tags: beginners, tutorial, powerapps, lowcode
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffnvuevxdye2fm55p7ei.png

---

> TLDR; in this article, you will learn how to build your first Low Code application using Power platform.

You will learn:

- Lay out controls for displaying and capturing data.
- Respond to events.
- Save state in a variable.

{% embed https://youtu.be/PvvZ9H4u38Q %}

## References

- [Canvas apps](https://docs.microsoft.com/en-us/power-apps/maker/canvas-apps/getting-started?wt.mc_id=academic-0000-chnoring)
- [Canvas app tutorial](https://docs.microsoft.com/en-us/power-apps/maker/canvas-apps/get-started-test-drive?wt.mc_id=academic-0000-chnoring)
- [Control reference](https://docs.microsoft.com/en-us/power-apps/maker/canvas-apps/reference-properties)
- [Video URL](https://youtu.be/PvvZ9H4u38Q)

## What is Low code and why do we care?

Low code development is using blocks instead of specific code to build apps and services. There are many Low Code platforms, Microsoft's is called Microsoft Power Platform.

The reason these platforms exist is that there's a great need to build business apps and not enough developers to build them. Also, many times non developer sit on business expertise, and it takes time to convey all they know to developers.

With a low code platform, you can empower these business experts and turn them into citizen developers, and have them build apps.

## Canvas app

There are many types of low code apps you can build with Microsoft Power Platform. Canvas apps lets you build traditional apps in many ways. 

You can either build everything from scratch or model driven from a data source like for example Dataverse.

The idea is that you design an app much like a Powerpoint slide and use Excel like expressions to add logic. 

## DEMO - build your first app

1. Navigate to <https://make.powerapps.com>
1. Select "+ Create", to create a canvas app.
1. Select "Blank app", in the main area on your right.
1. Give it an app name and select **Tablet**.
1. Select **+** in the left menu to add controls.
1. Select a **Text label** and drag it onto the screen.
1. Select the control and change the Text property, either in the control or via the dropdown like so:

   ![Change label value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6j8v28lb87tjiinsc2i6.png)
1. Select a button and drag it onto the screen. Change its value to "Save". 
1. Select the button and ensure the `OnSelect` property is selected.
1. Change the fx value to `UpdateContext({ myvar: "clicked" })`, this will create a variable `myvar` and give it the value "clicked":

   ![OnSelect, create variable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmsh1670cst4iir1usyx.png)

1. Select your label and change its content, in the fx area, to the following `"Show text:" & myvar`, this will ensure it shows the content of a static text and the value of `myvar`. 

   > The `&` concatenates two strings together.



1. Test your program by clicking the play icon on the top right side:

   ![Select preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vnkmmxn3tb87z6oyceg.png)

1. Try clicking the button and ensure it says "clicked".   

Nicely done, you've created your first Canvas app, but we can improve it a little by relying on text inputs.

## Use a text field

1. Drag a Text input out onto the main surface. 
1. Note the name of the Text Input, you will refer to it now in the `OnSelect` property of the button:

   ![Text input name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elgux8znxecgm6hn2w14.png)

1. Change the `OnSelect` fx value of the button to the following code 

   ```
   UpdateContext({ myvar: TextInput2.Text })
   ```

   The above code will set `myvar` to the content of the TextInput2 control and its Text property.  

1. Run your program: 
    1. Enter some text, for example "abc" in the text field
    1. Click the button, you should now see the label be updated accordingly to "Show text: abc", it's working.

Let's improve our program next by clearing the input field after we click a button.

## Clear input fields 

1. Select the button and add the following code in the fx area:

   ```
   Reset(TextInput2)
   ```

   Your full code in `OnSelect` should look like so:

   ```
   UpdateContext({ myvar: TextInput2.Text });

   Reset(TextInput2);
   ``` 

   > Drag the fx field down vertically to see more of it. Note how we added semicolons, `;` above to separate between multiple statements.

   this code will clear the text input field and reset it to its default value.

   You were show one way so far to clear a text input, there's another way, lets do that next.

1. Select the text input field and find a property in the control detail on the right called "Clear button" and enable it, like so:

   ![clear button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d21h0grx6rfqmak50lqv.png) 

1. Run the program and notice the "X" that appears in the text field. This "X" will let you clear the text field via the UI.

   ![clear button UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylp3rgaveoeybdy4xp7p.png)

Congratulations, you've taken your first steps to using controls and understand how they work.