Posts

Showing posts from February, 2025

Point and Navigate to Screens in Component.

Image
In my previous   post , we have created the UI for the component. If you haven't seen it, please check it first before moving on here.  In this post, we will be learning how the items in our gallery will point to screens on our App once we place this component on those 3 screens. Steps: 1. Click on the component ' compLeftNavBar ' under Tree View and then under ` Properties `, click ` New custom property '. 2. Type ' MenuItems ' and set the data type to ` Table ` and press Create. 3. Select ` MenuItems ` property on top and set its value to: Table(     {         MenuLabel: "Home",         MenuIcon: Icon.Home,         MenuScreenNavigate: App.ActiveScreen,         MenuID: 1     },     {         MenuLabel: "Profile",         MenuIcon: Icon.CheckBadge,         MenuScreenNavigate: App.ActiveScreen,  ...

Hide and Show Left Navigation on Icon Click

Image
 In my previous post , we have created the UI for the component. If you haven't seen it, please check it first before moving on here.  In this post, we will be learning how the gallery should hide and show when user clicks on the hamburger icon. Steps : 1. Click on the component ' compLeftNavBar ' under Tree View and then under ` Properties `, click ` New custom property '. 2. Type ' OpenMenu ' and set the data type to ` Boolean `, and check the option " Raise OnReset when value changes " and press Create. ( check at the end of this post to learn more about Raise OnReset ) 3. Select ` OpenMenu ` property on top and set its value to ` false ` ( without quotes ). If you can't see it, try refreshing your browser tab after saving your work. 4. Similary, select ` OnReset ` property of the component and set the value to ` Set(showMenu, compLeftNavBar.OpenMenu) `. 5. Now click on the hamburger icon and edit  value for ` OnSelect ` property to ` Set(showMe...

Create A Navigation Menu on Power Apps

Image
Hi. Welcome back to another tech blog. Here, we are going to learn how to create a navigation menu on power apps. Suppose, we have 3 screens and we wish to build a left navigation bar for it using a hamburger icon. Create a new component and follow below steps: 1. Rename the component to ' compLeftNavBar '. 2. Insert > Icon > Hamburger 3. Insert > Layout > Blank flexible height gallery ( skip connecting it to a data source ) Inside your gallery place following icons: 1. Insert > Shapes > Rectangle 2. Insert > Text Label This is how your component will look like: Now, there are certain functionalities you want to implement in this component: The gallery should hide and show when user clicks on the hamburger icon. The items in gallery must point and navigate to the screens in our App. The area taken by the component shouldn't interfere with the elements on the App. Let's cover them one by one. [ Link ] - Hide and Show Left Navigation on Icon Click [ L...

Customize Blank Gallery in Power Apps for Todo Application

Image
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...

Simple Todo App Using Power Apps

Image
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 ...

Microsoft Power Platform Basics

Image
  What is Microsoft Power Platform? Microsoft Power Platform is a low-code platform for building business apps in very less time. It includes 5 main components: Power Apps Power Automate Power BI Power Pages Copilot Studio It allows organization to solve complex challenges using the Power platform. Power Apps: There are different types of Power Apps: Canvas app Model-driven app Canvas app gives total control over the screen contents and navigation between them. It uses connectors to work with data and services. We can also embed canvas applications into SharePoint, Teams, Power BI and Dynamics 365 applications. Model-driven apps are build on top of Microsoft Dataverse.  Power Automate: Power Automate is used to automate repetitive tasks and orchestrate them across various services using connectors. With it, we can create and use cloud or desktop flows. It is built on top of Azure Logic Apps but also offers connections with Microsoft Power Platform. Power BI: Power BI is a busi...