How YOU can build your first Low code app using Microsoft Power Platform

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.

References

• Canvas apps
• Canvas app tutorial
• Control reference
• Video URL

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
2. Select "+ Create", to create a canvas app.
3. Select "Blank app", in the main area on your right.
4. Give it an app name and select Tablet.
5. Select + in the left menu to add controls.
6. Select a Text label and drag it onto the screen.
7. Select the control and change the Text property, either in the control or via the dropdown like so:

1. Select a button and drag it onto the screen. Change its value to "Save".
2. Select the button and ensure the OnSelect property is selected.
3. Change the fx value to UpdateContext({ myvar: "clicked" }), this will create a variable myvar and give it the value "clicked":

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:

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.
2. Note the name of the Text Input, you will refer to it now in the OnSelect property of the button:

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
   2. 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:

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.

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