Simple Todo App Using Power Apps

Hi. Let's build a simple Todo application using Microsoft Power Platform with Power Apps.

First, we need to have table where we can store all the todos tasks. Then we will create a canvas app and connect the table as our data source.

Let's see, how can we create the table for the Todo Application.

Steps for table:

Step 1: Log on to https://make.powerapps.com

Step 2: On the left hand side, click on "Tables".




Step 3: Click on New table  > Table (advanced properties).
Step 4: Give Display Name for your table. Let's say "Todo". On the Primary column tab, you can change Display Name to "TaskName" though this is optional. Click Save.
Step 5: Insert data in one row as a sample.


Now, let's look at how to create the UI for this and connect our table with the UI.



Steps for Canvas app:
Step 1: Goto https://make.powerapps.com
Step 2: From the left side panel, click on "Create" > Select Blank App.
Step 3: Re-create the UI from the above image.
Step 4: Click Insert > Vertical Gallery. Drag the component on the UI to your desired location.
Step 5: Select the Vertical Gallery and click on Layout and select "Title".
Step 6: Similarly, click on Data to connect it with a Data source. Search and select the name of the table you have just created.

The functionality of the `Add Task` button is to take value from the text field and insert it into the table. For this, we'll use the Patch function.

The Patch() function allows to insert, update or delete records in a data source.

The Power Fx formula to Insert Data is: Patch(MyTable, Defaults(MyTable), {ColumnName: TextInput1.Text})

Here,
  • MyTable refers to the name of the data source in Plural name of your table.
    • Suppose our table name is "Todo", then the plural name will become "Todos"
  • Defaults(MyTable) refers to a new record in the data source.
  • {ColumnName: TextInput1.Text} specifies the column name where the value from the TextInput1 will be inserted.

Step 7: Click on the button. Select `OnSelect` property and edit the PowerFx for this to:

Patch(TodoApps,Defaults(TodoApps), {Task: TextInput1.Text})


Tip: Did you know you can press Alt key while in Edit mode to preview your app, instead of clicking the Preview button?


Next, we'll learn how to make a checkbox against each task on the todo app and strike when its completed.









Comments

Post a Comment

Popular

How To Create MySQL Table with SequelizeJS

Image
Hello, in this post I will be showing how you can create an SQL table using JavaScript without the knowledge of MySQL. Sequelize is a promise-based  Node.js   ORM tool  for  Postgres ,  MySQL ,  MariaDB ,  SQLite ,  Microsoft SQL Server ,  Amazon Redshift  and  Snowflake’s Data Cloud . It features solid transaction support, relations, eager and lazy loading, read replication and more.
OPEN

How To Read CSV Files in Java as Maven Project

Image
Many of us have problems reading CSV files in Java but not anymore!. In this guide, I will share how to read CSV files as Maven Project. For creating a Maven project: In your Eclipse IDE, click on File > New > Project... > Maven >Maven Project > Next > Check "Create a simple project" checkbox. Under Group Id: The name could be anything. It is same as any package name. E.g. in.sumitkp Under Artifact Id: Same as above It is same as any project name. E.g. maven-demo1 Let the Version be the default. Under Name: Give the name for your project Click Finish. In your Project Explorer, all the necessary files will be automatically generated. Inside the root folder, there will be an XML file auto-generated called  pom.xml . About pom.xml: POM stands for Project Object Model It is an XML file that contains information about the project and configuration details used by Maven to build the project. When running a task, Maven looks for the pom.xml file in the directory. I...
OPEN

How To Create A Hibernate Project in Maven

Image
In this post, I will be showing you how to create a Hibernate project using Maven and how we can add MySQL dependencies to it. Here, is a whole process picture which you can click and follow the steps. The direction of the process has been indicated by arrow icons. Now, configuring the Hibernate XML file: Inside your project folder, right-click on 'src/main/java' and select New > Other... > Type filter text: xml > Under XML folder, click on XML File > Click Next > Under File Name, type: hibernate.cfg.xml > Finish. Inside this hibernate.cfg.xml file, we would now need a dtd line. dtd stands for 'document type definition'. It defines the tagging structure of an XML document. For this, search on Google or any search engine: hibernate dtd. Find for the result that says "Index of /dtd - Hibernate". Click the link or go to  https://hibernate.org/dtd/  . On the next page, click on either of these three links. A dtd file will be downloaded. Open the ...
OPEN