Customize Blank Gallery in Power Apps for Todo Application



Hi, in my previous post, you have learned about how to make simple Todo App in Power Apps with simple text input, button and preformatted vertical gallery. In this post, we'll be learning about how to customize the gallery rows to have a label and two buttons for completion status and edit task using a blank flexible height gallery.

First, this is how the table will be:



Second, let's prepare our UI.



  • Now, click on Insert and search for "Blank flexible height gallery". Drag it to the UI. 
  • Then, it will ask you to connect to a data source. Select your table and connect.
  • Now there is a small pen icon on top-left corner. Click it to customize one row of it.

  • Now, insert a label into the gallery row. Resize it according to your needs. 
  • In order to display items from the table in the label, edit the `Text` property of the label and enter Fx code: `ThisItem.<column_name>` so here, it would be `ThisItem.Task`.
Here's how it looks till now:

  • Now, we need to add two icons for "completed" and "edit". So, click on the gallery row and click on Insert > Icon > Select 'Check' icon and Select 'Edit' icon.
  • Place and resize icons according to you on the row.
Here's how it will look:




  • Now, the requirement is, clicking on 'Check' icon, it should update the `Completed` row in table to true and also make the row background to green and on click on 'Edit' icon, it should open a new screen for us to be able to edit the details and update it in the table.

Steps for Check icon functionality:
  1. Click on the check icon and edit its `OnSelect` property to: 
Patch(TodoApps, LookUp(TodoApps, 'Task'=Gallery1.Selected.Task), {Completed: true});

Steps for Edit Icon functionality:
  1. Let's add another screen to our app and rename it to "EditTaskScreen".
  2. The UI for the EditTaskScreen will look like this. You can customize the UI according to you.

  1. Click the Edit Icon button, edit its `OnSelect` property to:
Navigate(EditTaskScreen,ScreenTransition.Fade, {taskName: ThisItem.Task, completedStatus: ThisItem.Completed})

  • Here, we are passing the context variables in the third argument of Navigate(). This will help us get data to another screen.
  • Now, edit the `Default` property of the label on EditTaskScreen to taskName and do the same to the toggle button for status to `completedStatus`.
  • Edit the `OnSelect` property of `UpdateTask` button on EditTaskScreen to:
Patch(TodoApps, LookUp(TodoApps, 'Task'=taskName), {Task: TextInputTask.Text, Completed: toggleStatus.Value});

Let's look at the final app:

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