Building Apps for Beginners without Coding (No Coding App Development, Web Development, Web Design)

1. Introduction: If I told you you can create applications without writing a single line of code. Learning. You can create applications without even knowing how to code in the first place. In this current class, I'll be teaching you how to use Power Apps to create applications for whatever purpose for mobile applications, web applications, and much more. In this current class, we're going to be learning about to use power applications. In order to develop your own unique app such that, we're going to have a hands on practical example where by the end of the class, you'll have a clear idea how to start from A to Z, how to develop and create your own applications without even knowing how to code. And the great thing about this is we're going to have a practical example through a really powerful application that we could use for demonstration purposes, which we're going to be learning how to create a food recipes application. Yes, you heard me right. Food recipes, where you get to find recipes, find the ingredients, the images, and scroll through them and learn about them. And you can add recipes, remove recipes, and much more. By the end of this class, you'll have a clear idea how to do so and you'll develop the awareness to apply for your own unique cases, whether you're wanting a cafe or restaurant, working on a marketing campaign, whatever it is, the concepts that you're going to be learning in this current class, you could map them to your own preferences such that you have the ability to create applications without even the need to know how to go. 2. Your Project: Your project for the class revolves around creating a food recipes application in which you're going to be downloading the data provided to you and following the steps within the current lessons one at a time, such that by the end of the class, you have a clear idea how to develop the application. After which you're going to be sharing your results for feedback. 3. Power Apps Fundamentals: Welcome back. In this lesson, we are going to learn about a very powerful component within the Power platform, which is the Power Apps. As the name implies, Power Apps is when we are going to build applications which are considered to be low code applications through the Power Platform, which enables the users to create custom apps tailored to specific business needs without the need to actually know how to code. And it integrates seamlessly with other Microsoft services and third party apps. Power Apps is one of the tools within the Power platform which allows you to create applications. Power BI is for visualization and data representation. Power Automate is where you actually create flows and you automate tasks. Power Apps is where you actually build applications, and these applications they have interface that allows you to have certain prompts for the users that they can click on, they could engage with, to collect information, the same way that you have any application or your mobile instead of costing you thousands upon thousands to develop, you're able to have a very cost effective solution, as we are going to see in the hands on practical part of the class where we actually learn how to build an app from scratch, completely from scratch, completely code free. So as you can see so far, the pattern of the Power platform is to have the ability to create customized solutions for various business activities with the emphasis on being low code or no code. So this gives you access, regardless of your coding expertise. Whether you are an expert or not, you're able to get up and running with Power Apps. 4. Power Apps Usage Cases: Back. Now we're going to explore the use cases for power apps and kicking things off with an employee onboarding portal. If you have new employees joining your company, you could create a portal application where they can create an account, log in, sign in as if it's a website, and they can just simply add their credentials and details to your company's database. Expenses report. You are running a company and you have some expenses or for your own personal expenses, you have the ability to create an application where you add the expenses, which automatically will go to tables stored in your data verse or your Excel sheet or whatever source that you have and update accordingly. Then you have the ability to create an application for customer relationship management. I'm giving you different ideas, which vary based on context. You have the ability within your business, within your company to use any of these ideas for inspiration in terms of building an application to satisfy that requirement. So the purpose of this current lecture is for you to think about the ways that you could incorporate power apps in order to get a task done before we dive into the hands on application and we actually build then we have inventory management. You have the ability to manage inventories, whether a supermarket, a store, anything gets added or removed. You have the ability to create an app to do the manual tasks for you. Then field service management in case on a maintenance activity, you're removing spare parts, adding spare parts, all of these numbers tend to fluctuate. So if someone is doing a service on site, they have the ability to access the app on their phone and update the data accordingly, you have employee time Sheet app. Whenever someone punches in or punches out, automatically, you have the ability to update this on your company database. Incident reporting if something happens on a worksite in an office, someone who's inspecting, let's say, the health and safety employee, they can inspect, open the application, share the report, generate the report, and upload it to the data verse or to the tables or to the central data location. In order to have this in record rather than waiting to go all the way back to the office to create the report and then to upload it. So as you can see, these are various applications based on various industries, based on various processes and natures. And this is just simply an explanation. The list is quite endless and extensive when it comes to using power apps. Once you get to the hands on practical application, make sure that you are keeping up with that, where I'm going to walk you through step by step how to build an application from scratch then we are going to actually see and draw some inspiration in terms of how could we use this on our day to day activities, whether at work or business? 5. Canvas Applications: Lesson, we are going to examine one of the types of the applications that you could create with Power Apps, which is the Canvas apps. There are two types of apps that you could create. You got Canvas apps, and you got model driven apps. So what is a Canvas app? It is a type of the application where you have to or you have complete control over the layout and design. As you can see over here, as we dive into the Power Apps and learn about the interface, this is what we call as a screen now, this screen, as you can see, it's filled up with graphics, and you have the ability to create, customize and build this simply by dragging and dropping. You could add and drop drag and drop text buttons, elements, images, and other controls on the canvas to create a custom friendly interface. These abs can also be connected to different data sources, and they are ideal for creating specific solutions. What does that mean? If you'd like to have something which is customizable, something which looks in a certain way has certain functionalities, which is quite easy to implement, good graphical interface. It looks quite proper. It is mainly focused towards customization towards your business needs, then the Canvas app is considered as the first go to option within the Power Apps. Like I mentioned, we have two different options. We got the Canvas app, and we got the model driven. So in summary, a Canvas app is an application where we have complete control on the design and the layout. It gives us the maximum flexibility where the focus is on actually the experience of the application, the graphics, the presentations, the engagement, the business need. This is the whole purpose of the Canvas app. In the next lecture, I'm going to show you the difference between Canvas apps and the model driven applications. 6. Model Driven Applications: Welcome back. The second application within the Power Apps is the model driven applications. These are a type of applications that focuses on the data model and businesses. If you take a look at the image over here, the focus is not on graphics. It's not about the experience. It's about the functionality and how the data is being utilized within the application. Now, unlike Canvas apps, which give us full control over the design and the layout, the model driven apps, they generate the user interface automatically. This is very important. Once you dive into building a model driven application, you will notice that by default, the interface has been automatically generated for you, where once you collect data, you add data, connections are going to be established. They are going to be created by default, making the best use of the information, and the interface is going to be created for you, unlike the Canvas application over how the application looks like with every single detail. 7. Setting Up Power Apps: Navigate directly to the following website, which is power platform.miicrosoft.com, which is right over here. Okay. Let me just simply go through the tab. Again, I'm going to type in Power Plat form. Dot microsoft.com. You can do the same thing with me in order to follow up. And why am I doing this? Because like I've said, I'm going to be sharing with you a way for you to get a free trial from 30 days to 60 days to actually tinker with these apps. Click on Enter. Now you'll be directed to the actual Power platform designated area within Microsoft. And here, once you click on products, you're able to see all of them, the Power BI, Power Apps, Power Automate Power Pages, copilot studio. So how do we claim our free accounts? Simply click on Start Free over here. Here we go. Now, we're going to have what we call the free trials page. You're going to select your free trial based on your own preference. As we are going through this course, I would suggest that you start the free trial for every single application or tool based on the usage. If we start with the Power Apps, log into the Power Apps and have your free version in order to try it out. If we start with the Power BI, go to the Power BI in order to try it out. Do not start all of them at the same time in order to avoid losing access. Like I mentioned, I'm going to be sharing with you, the free way to have a free trial without paying the full package for Microsoft 365 or Dynamics 365, and this is it. So once you decide which one you're going to go for, as we are going to be starting with Power Apps, as we're going to see throughout the course, start with this one. Get started, have a account ready and you are good to go. 8. The Power Apps Interface: We are going to dive into the Power platform right now in which we are going to kick things off by learning about the Power Apps. So how do you go to the first tool within the Power platform that we're going to use, which is the Power Apps? Simply go to the following website, mopowerapps.com. So once you go to mapowerapps.com, you are going to be landing at the Power Apps homepage. Which is the current page. In this current lesson, we are going to explore the power apps one of the Power platform applications, which is the Power Apps. Now, the Power Apps are used to create applications based on data, either a mobile phone application, a tablet. It could be for your own personal use, or it could be for your own organizational use as an employee or someone working in college, whatever, regardless of the case. Help you build applications which are able to actually collect information, display information, and conduct certain tasks. Now in this current lesson, we are going to explore the navigation of the power apps and how do we go about building our first application. Now, this is going to be a very nice basic overview. Like we have mentioned, at this current stage of the course, we are going to be giving attention for the fundamentals and the basics with minimal code involvement as much as possible. That way you're able to acquire what's necessary and to actually start building applications. So the first thing is, let's take a look at this. We have the following page, following prompt screen. This is where you are able to actually utilize the copilot, which is the AI version of Microsoft in which you are able to type in a brief breakdown of what would you like the app to do? And it's going to generate some pages for your application, and then you connect the data to it. This is what we call them as screens. We're going to see how does that look. Then as you go down, you can take a look at the display over here. You have start with data, start with the page design, start with an app template. For Start with data, this is where you are actually going to use either the data verse, which you have set up at the beginning as part of your company where you're able to or within your organization, where your company actually has a certain place where they stored the data, and then the data stored in this data verse, we call them as tables. Now, the exact details of the intricate details of the data verse, there are for a separate course synths beyond the fundamentals levels and the basics, which could get quite techy sort of speak. But it's essential to know, but does it limit our application? Of course not. We're able to actually build applications without even using the information of the data verse. And that's what we're going to be doing in this current segment of the course where I'm going to show you as an average user, someone who is getting used to the power platforms, how you could get up or running and building. Your own applications, your own displays, your own ultimations with ease. So when you click on Start with data, you're able to use Excel files, CSV files, SharePoint less, whatever source of data, even your own data stored on the data verse. Here, this is going to utilize the web pages or the Power pages, which is another Power Apps tool that's going to be utilized to actually build on and connect it to your application. Here you have ready made templates, apps that other users have created, and this is simply the front page. And here you have any other apps that you have displayed. These are by default. These are automatically displayed like samples in order for you to be able to see how could you get this up or running. Now, this is the fun part over here. First of all, let's take a look at the navigation. Once you click on Power Apps, you could see any other apps that you have. You click on the homepage. This is the homepage. Now, here we have the create, learn apps, tables, flows, solutions, websites, chatbots, connections, more and the Power platform. We're going to go through them one at a time. That way you understand what do they mean and how to navigate. First of all, we are going to start with the Create. This is where you are going to click on it in order to build your applications from scratch. Like we have mentioned, you have two types of applications, Canvas and model driven. Canvas are simply sheets, layers or pages. You're able to build and customize, then you are going to connect your data. The offer you flexibility from a design point of view. However, the model driven, they are based on a solid information solid information in the data verse, so you do not have that flexibility. So that's why you have two different options. Usually for model driven apps, they are used within a company or an organization because everyone is working in the same company. So it doesn't allow that flexibility. It has stringent security and stringent policies. But for Canvas, anyone can just simply go up and start building their own applications. So let's explore the navigation over here. You have either the option of a blank app from scratch. There's nothing displayed at all, simply click and you start from scratch. Here you are going to start from the data verse in which you have a sample application built up already based on the information provided. Now for the blank application, you start by building the app, then you connect it to the data that you. With the data verse as well, you are going to build the app, three layers, three sheets, three screens, and then it will be connected to your data verse, not any sort of data. For a SharePoint list, this will create an app which is where we focus on the data from a SharePoint list, similarly for the x SQL file or an image of an application or just simply an image of another application that you have seen somewhere, just simply upload it. It will try to provide you with the same user interface, and then you connect it to your data. So these are various different options. Like I mentioned, the subject of Power platforms is very extensive. It's beyond getting covered in one simple like one complete holistic course because the areas of application are very diverse, the tools are very diverse, the data sources are very diverse, but you need to get up and running and you need to have the essentials, the fundamentals to know how to navigate this. And this is the whole purpose of this current course. Now let's take a look at the learn in case you would like to learn certain aspects, take a look at some files from power apps to help you fine tune your journey. Once you click on Apps over here, let's take a look at the difference. It's very important. Where it gets confusing to many. When you click on Create and you have the following page, here you are going to be creating an application and then connecting it to your data sources, right? Simply blank, you build the application, and then you connect it to your data from a TZ. You have different options. For the blank application, it's either Canvas or model driven. Let's take a look at this. We're going to click here you go. You have the blank Canvas app where you have a blank screen and you start to build the visual appeal then connected. Then you have a blank app based on the data verse, which is a model driven application. This is a Canvas application. Power Pages website, this is where you build the application with the Power pages in mind. It's like a website connected to the application. Take a look at the descriptor over here. This is a website connected to Power pages. Now, when you're creating the application, these are the two main options. Canvas apps. Do not need to have a data verse source. Any source could go. Model driven, they need a data verse source. Okay? Similarly, once you go over here and you click on Data verse, automatically by default, this will assume that you're going to be building data which is model driven, data verse based. So the blank application gives you the option either to go for any source or an actual data verse source. So you have to be careful with this. Once you click on the Blank application, you're able to actually build apps which are Excel based, SQL, data verse, SharePoint, and image. But if you have a specific application and you know what you need to use as a data source, select it from over. Done. This is the foundational part where you build it from scratch. Let's say you'd like to experiment, you can go to apps. In the apps part over here, you are able to see ready made templates, ready made designs, or you're able to build upon certain templates and connected to your data, saving you the time of creating things from scratch. So how does that work? If we take a look at this, this is the display of the apps over here. There are no new apps built. Take a look at the navigation. Over here, let's start from the middle part where we are going to take a look at start with data, create a table, pick an existing one, or even import from Excel to create an app. So what you do here is simply you are going to upload any file and it will build the app for you and create certain connections to facilitate the process. So you are not building things from complete scratch. You are going to utilize pre built templates. Start with copilot. Copilot is the artificial intelligence version of the Microsoft part. Once you click on it, you are able to type over here. What you need the app to do. And then it's going to actually try to build the app for you. Like I mentioned, these are case by case basis. We're going to leave them to a separate course where once we dive into advanced levels of power apps. Now for the fundamental levels, this is not quite necessary for you to start diving into start with the page design. If you have a different design layout, you can upload this. Start with the template, for example. If I click on a template, take a look at these pre built templates. It shows you that this will provide you with an application which is made up of three screens, browse, details, and then create. It should be connected to a data verse. This one is a SharePoint. This one is an Excel. This one is an SQ file. Right. Other templates based on application, SAP procurement, employee Kurds, awards and recognitions, appointment booking on boarding body. These are pre built templates by other users. You can just simply click on them, and then it will prompt you to connect your data source. Are you going to connect it to an Excel or are you going to connect it to data verse, whatever it is? So the apps part over here, this is where you have more flexibility or you have more support when you are building your applications. You have ready made templates. You're able to use artificial intelligence as part of the copilot. You have ready made templates for the apps. You're able to start with any design that you have seen somewhere. You can just simply import it or you're able to add your data. And then once you add the data, by default, it will start to make connections and display an application for you. So think about it as the easy way to build an app for Create, this is where you get labor intensive. This is where you actually start to build it from scratch. It's up to you to go about every single element of the design process of your application. Both of them get the job done by. But if you have certain requirements, certain stringent requirements, and you have the sufficient know how, you can go for the create and start building. If you need to tinker with things and start to experiment, go with the apps part. Now, we are going to proceed at a later stage to show you how we're going to be building a certain application to help you understand how things all of them fit together. Now, tables, these are the data verse data sources. Once you are creating data in the data verse, they are stored as tables. And once you click on tables, these are pre built within your data verse. You could add a certain element to your table. We could create a new table. You could start with a blank new table. You could create a file or table from an Excel sheet or create a table from a SharePoint list. The table, once you say the word table, means this is related to your data verse. This is part of the data verse, and you're going to be including it into the application. Now, when you are building the application, like we have mentioned, you have two options, either connected to the data verse or you are going to use your own source, which could be an Excel file, CSV file, whatever it is. A side note, when you are taking a look at the navigation for the Power Apps and any other Power platform applications, they always try to connect between different applications. How, for example, flows. This is by itself is part of the power flows, or power auto so you are able to cross connect to integrate Power Apps as part of Power BI and as part of Power Automate. So if you have any connections between the application that you have made and the Power Automate, you are going to see over here. Here are additional templates as well for the templates created by other users in which they have connected an application, right, to a button, for example. And then here, for example, they have an application which adds an item to a SharePoint list and then sends an email. These are automated versions, automated applications, automated tasks which are done separately within the Power Automate. It's a separate application, right? But you're able to cross connect or integrate this is what we call as an integrated system where you combine different power tools together. Now, this is again, an advanced stage, but it's quite easy. It's nothing complicated, where you build an app. Then once you click on any of those pre built templates, you're able to create connections, and it will get prompt where you're able to get these connections. What are solutions Solutions are like boxes. They're like a folder. Once you click on a solution within your company or within your organization, within your environment, once you click on a new solution, you're going to have a display name, a publisher or whatever information they would like to add. Think about it like a box such that if something goes wrong within that box, it doesn't affect other options within your company, right? So when you have a solution, which includes, for example, an application, a flow, certain data, any elements which have been modified, they fall under one solution. That you could create. And then you have the option to share it. You're able to invite people to work on it with minimal disruption to the data that you have already stored. Think about it. Now, websites, this is where we get connected to the Power pages, and you click on Create a new website. This will take you to the Power Pages platform. All of these displays are actually related to other Power platform tools. Chatbots is related to the virtual agents. Connections, this is very important. When you click on connections, connections are basically the sources of data. Yes, you have created a data verse. But if you would like to obtain data from another source and add it to your data verse, or you would like to connect different Excel files or a drive or whatever it is, this is where you have these connections. You click on them and you're able to add a connection, which takes data from that source and then adds it either to your tables or to your data verse as a whole, which will enable you to even further modify your applications. Like I mentioned, the subject is extensive. You do have a lot of options that you're able to manipulate information with. That's why it's very versatile and very flexible. Keeping in mind, at this level, we are still navigating. We are taking a look at how everything fits together for you to be able to understand how would you work about this? And once you click More, this shows you all of the things that you could pin over here. Solutions, pins, choices, data flows. All of these are supportive or supplementary tools which will help you to represent the data that you have. Now, do I need to use them at this current stage? Not really. We could just simply leave them for a later stage? Or part of a later course we take a look at power apps with details. But like I mentioned, there are tools which are handy. Some of them are useful. Some of them we really don't want to waste time on diving into them, and our goal is to actually get up and running and building no code or low code applications. And finally, once you get to this part over here, which is the Power Platform button, once you click on this, this is where you get to see all of the other power platforms that are available. Power Automate, which is responsible for the flows. Now, you do have Power BIs, which creates reports. You got the Power pages, which is going to help you with the websites. You got the copilot studio and the chatbot. I will help you with the chatbots over here. Now, the Admin Center, this is where you actually are responsible for your data verse, which affects in turn your tables. So see how all of these things are connected together as part of a cohesive environment. Now, a quick recap. In this lesson, we are focusing on the navigation. We're learning how we could actually navigate the power apps. Keeping in mind, in my opinion, this is the most complicated how to actually navigate this. As we go about building the power apps, I'm going to show you some tactics, some techniques where you keep it as minimal code as possible. No code involvement. You get strategic. It's quite easy. There's nothing overwhelming. We are not building anything yet. But in the upcoming lessons, we are going to actually dive into the Power Platform apps part, and we're going to start to build our application. 9. Diving Into Power Apps for No Coding Development- Part 1: Welcome back. So at this current stage, we have learned about the general layout of the Power Apps platform. Now, in order to be able to build the applications that we have, we need to understand how could we actually utilize the components within the Power Apps platform to do so. Now, in this current lesson, we are going to walk through the elements of building the applications. So for the sake of demonstration, we are going to go to create and then we're going to click on Blank App. We're going to go for a Canvas app. Why? Because this gives us the most flexibility compared to the model driven applications. Now, we are going to click Create now we have a prompt in front of us for the app name. Let's call it XYZ. Now, the options for either tablet or phone depends on your application. Let's click on phone for the sake of simplicity. Keeping in mind, once you click on Tablet, it will take a longer period of time to load the bigger Canvas. Now, you click on Create. Now it's going to actually initiate the Power Apps application. And the first thing that pops is welcome to PowerApps Studio. We have two options. Either you create a form, it's an actual form that either shows data or collects or create a gallery. A gallery is actually a list of items. We call them as fields, which could include images. It could include texts. It's up to you. Now, let's take a look at a very basic example. You could click Skip all the way through just simply to start seeing things from scratch. Let's say create a gallery. Now, when I click Create a gallery, it's going to prompt for me by default, any data source. We have not added any data sources. We did not connect it to a data verse. We did not import an Excel or CSV file or SharePoint list. So that's why when you are building the app, any element that you're going to be adding, you need to incorporate a data source. Now, if I have no addition to the data verse, I could just simply click, create a new table, and I could import the data to my application. But again, in this lesson, we are not building yet. We are exploring the elements that we're going to be using in the building process. And we do have connectors. These are the connectors that are going to get us data from either Microsoft Access, Dynamics 365 or advanced stages. Take a look at the fields over here. The fields tab represents these items. These are the items which are stored on your sheets, your tables. Now, we do have the layout option. Let's click Exit over here. Click on Layout. It prompts for me different styles. Let's take a look at this. If I go for titles, this will change to a title. If I go for title on subtitle, this will change to a title on subtitle. Image and a title, this goes for an image and a title. What we call this, we call this as a screen. Take a look at the name at the bottom. This is screen number one. The entire thing is called a screen. This Canva is called a screen. Once you click on this, it displays for you how many screens that you have. As you're building your application, you're adding more pages, right, the same way you're navigating an application. So every single page is considered to be a screen. So if I click on this gallery that I've added, if I would like to modify it somehow, take a look at the right side. Now, this will show you, first of all, the data source for the gallery. You can change the data source. This is one. You are able to. Let's click again. Let's take a look at the borders, for example, if I would like to change the border to red, this will flip the color to red. Let me just reduce the size. Here we go. Okay. Now, border, I have, let's say, a dotted line or solid line or a dashed line. Let's increase the size to ten. For example, here we go. You're able to see it quite properly. So you get the idea. At this stage, you're able to actually modify this. You're able to include a scroll bar. It's up to you. Show navigation on and off. I'm able to do so. Then you're able to add a transition, for example. Let's say Pop, you're able to do so. Then let's go for advanced features. Click on Advanced. You're able to add any certain labels that you're able to modify. This is for an advanced stage, so we're not going to be tinkering with this at this current stage. Like I mentioned, we're going to keep it as code free or low code as possible. Zero code is the intent. So these are the properties for any elements that you add. If you put it over here, you would like to modify what it looks like, you can take a look at the right side to do so. Right? Now, let's explore the navigation on the left side. Now, you can see at the top, we have screens, and we got components. Screens are the pages that you see. If I click on screens and I click on Create New screen, it will give me the option for layouts. Now, let's go for calendar meeting, email, success. It's up to you. Now, let's create, for example, a list. Here we go. You create a list. Now, by default, is going to load this for me by adding certain titles, refresh page, buttons. All of these buttons, they have certain functionalities that we could change, scroll up, scroll down. Now, how did this impact our application? Take a look at the bottom part. You got two screens now Screen one, and you got screen two. So you could have a connection between them such that when you click something on screen one, it could add something to screen two. And this is the logic that you follow when you're building an application, a flowchart on a piece of paper. What are the things that you would like to display on your screens, right? So this is when you add what we call as a screen. Components, on the other hand, these are elements which should be fixed, and you can just simply copy paste them without repeating the process over and over again. For example, if I would like this to be duplicated over and over again, I can just simply add it as a component. And when I click on New component and I add a certain item, and under the component umbrella, here we go. Click on New component, add an item or connect to data. I'm going to click Add an item, for example. Let's create a text label. Hello. I gave me a list of things that I could add, and the options are endless. Either an image, a gallery, a media, an icon, it's up to you. So this now has become my component as called component number one. You can see over here. Notice I have screen screen one, two, and it got components. So what are the uses of components? Click over here. Tree view. Now, I do have my screens, right? Now, I can see screen one, screen two, and this navigation pane or tab. Any item which is here is going to be listed over here. Let's click on rectangle number one. Shows me over this part. Click on the search box, prompts over here. Click on this part. Shows over here. Click on this part. You get the idea. So every single item within every single screen that you have is going to be displayed for you. So once you have a certain component in place, right, you have built a component. This is a component, which is something that you'd like to duplicate over and over again. You are going to go to any screen that you would like to add, then click on the insert part. Right on the right side. The insert gives you the option to add any elements, right? Here you have text labels, edit forms, text input, rectangles, date picker, it's up to you to experiment with this simply type component. And here we go. I'm able to add my component for me, which is hello, pre built set. So this is a very advanced, very powerful tactic. Even professions, they have no idea how to do this. Simply just when you create a component, you could save it and you could add it to other applications. You could add it to other tools. And this is a very, very powerful hack to keep in mind. You can build it once, keep injecting it over and over again. So the pane over here, that review display gives me the screens for my application, the components that I've pre built to add, and then I'm able to explore over here the various screens and the components which are present in every screen. And if I would like to flip between screens within my application, you can go to screen one, screen two, and I'm able to see the components 10. Diving Into Power Apps for No Coding Development- Part 2: Welcome back. Now let's continue exploring the navigation in order to have a complete holistic picture. How are we going to be building our application? So on the previous lesson, we've learned about actually the layout, the general layout, the screens, the components, the tree views, the bar over here, for the components within the screens, in addition to the advanced or property segments for modifying the screens that we have. Now let's take a look at additional options. Once I click Insert over here, we're able to add any items that you would like to your application based on your design. You have the custom components that you build. You could add text input or even pen input. Take a look at this. Once you click on this, if someone within your company, you need to sign something, for example, you could add this any certain background image, you could modify it this is part of signature to erase. So the applications are quite endless. Then we transition to data. This is where you actually connect the data from your data verse or from directly uploading your XL file, CSV file or SharePoints list, whatever it is, and start connecting it to your applications components, right? Then you have the option for media. If you'd like to upload a certain video, you'd like audio or images to inject them into your application. Then you have the integration with another Power Platform tool, which is Power Automate. That's what we have sent. These are present within every single application or tool or power tool. They are present for you to be able to use them. Once you click on Power Automate, this will show you any flows if you click on something or create something over here, it could trigger a flow on the Power Automate platform. Then you have the variables part. These are the code based variables. What I mean by code based variables? Take a look at the top part over here. Here we go. This is something similar to XO. Where you have different functions, right? You got different functionalities, and then you have the options to actually alter the functions. We're going to take a look at certain application once we start building our app, then you have advanced tools where you could get to monitor the usage of the apps if someone is using it, how long they have used it for. And that way, now you have a full, complete understanding of this current navigation pain. Now let's transition to the top part over. There you go. This part right over here. So this is where you get to insert also any other options, the same way you have the insert over here. This is where you have the ability to add data by creating a new table, the same way you have the ability to connect your data over here. You have the option to create a new screen. And once you click on this, this gives you the easy access to different templates. Let's click on this. For example, Tutorial is going to open this for me. It gives me a button to actually navigate this. And notice what happens over here. Once I click on the button, it automatically by default, fixes the function. Like I've mentioned, we're not going to code anything, but it's good to have this in mind for later stages once we dive into an advanced application of power apps. How could you build applications? How could you change these functions for different purposes? Again, no code needed very low code involvement, but it's good to have a certain idea. So now this impacted my screens. I have three screens right now, screen one, two, and three, and I'm able to toggle between these screens. I could select a theme as well, for example, standard blue. You could change the themes based on your own preferences. You click on this and automatically it flips the entire theme for you to have a certain layout if you would like it. And once you click on the three buttons over here as well, you could change the background color, background image. You could change certain settings, or you could add a certain file, it's up to you. Now, once you are done, we have, let's say, hypothetically, built an application, like I mentioned, at this current lesson, we are still understanding the elements used to build an application. You got the option over here. Either you click on Share to share it as a link or you could share it to your company, whatever it is. This option over here tests any issues. You click on the app checker. Click on this. Now, this is going to run any test for you to check if everything is fine. Click recheck all. Everything seems okay. No issues because we don't have any data sources yet, so everything should be okay. Then we have the option to save the app. Then we have the option to save it with any notes that have been added if you're working on it with other developers or individuals. You could download a copy. You could just simply click over here to publish the app, and it's good to go. Then you could click Preview. This is where you get to try this over and over again to understand the functionality of your application. Once you click PLA we have the application displayed for you. Now, since we have not done anything yet in terms of connecting the data, so if I click over here, I could search, it should filter. So apparently the filter is quite working well. Take a look at the signature part. You could change the color, and then you're able to add something over here. So that functionality is present. Like I mentioned, click on the exit to go back to your studio, and here we go. Now, you're able to actually understand all of the elements present in the canvas. How would you build an application, all of the things which are involved in building the application. Let's have a quick recap. We have what we call as screens. We're able to take a look at the various views, data, media, integration with other power apps. We could add data. We could add a new screen. We could navigate between them and any components that we would like to duplicate or replicate. Once we click on anything, we have the ability to actually modify the data or to actually connect it to other data sources or tables or modify the visibility and the themes and how it looks like. And once we click on anything, you could keep an eye on the function tab to see the impact of what happens with the button once you click on it. So all of these things are very essential to have in mind as we build an application. Now, at this current stage, we are ready to dive into a building application. And like what we have mentioned, this level course at this current level, there is no code involvement, very low level, and this is very basic application in which we learn how to actually get up and running in a strategic and smart way with power apps, which will help you develop some inspiration for your own applications. 11. Building Your First Application Without Coding: Now we are ready to start building our application in which we are going to build a food recipes app, something which is very nice, very powerful to have, where we get to have different recipes, ingredients, cooking steps, displays of these foods based on their cuisines. It's a very, very nice application, which will help you draw some inspiration. Your own situations. Like I mentioned, this is at a fundamental, a basics level. We're going to keep it to no code level, straightforward and the advanced techniques, tactics, model driven applications. We're going to keep them to a different separate course where we dive into further applications. Keeping in mind, like I mentioned, the domain is quite endless, so we need to have the foundational steps in place. Are covering in this current course before we transition to more advanced stuff. So what we are going to do is we are going to build a simple canvas application, not a model driven application for the sake of simplicity. In order to do so, like we have mentioned, you can either go to create and then we are able to take a blank app from the get go and start building it from scratch, and then we are going to actually connect it to our data. But like I mentioned, in order to save time, to save effort, and to make sure you get up and running by the building process, we are going to get strategic with the approach, and how do we go about this? Click on Apps. Once we click on Apps, we have the options to utilize either pre made templates or actually connect our data from the beginning and then let the Power Apps platform build it for us. So how do we go about this? Click on the Start with data. Now, once you click on Start With data, you have two options. First of all, it gives you the option to have artificial intelligence help you build the data, and then you are able to have an option of adding the files from the beginning either by selecting an existing table or by creating or adding a CSV file. Now, once we are adding an existing table, it means we are actually building from the data verse, right? Like I've mentioned, we're going to keep it quite simple. Let's go for a certain CSV file. You're going to click on this and make sure that you upload the file which I've provided for you. 12. Setting Up Your Tables and Data Sources: And welcome back. Now we are diving into the building of our application, and the groundwork, the foundation is by actually having your data. So we have uploaded the CSV file. Like I mentioned, if you are going to be hands on in this current course, make sure that you download the file and go along with the step that I'm going to be teaching you. Our goal for this practical application is to actually equip you with the knowledge how to build an application in the easiest way possible. And how could you draw some inspiration to build future apps for further development? Like we have mentioned, the current application revolves around having a recipes application where we are going to have a recipe's name, ingredients, cooking steps, and the type of cuisine. So it's a very nice, powerful app that you could so we've uploaded the CSV file, and basically, it's in the form of a column. This is what we call them as tables. All of these columns represent the data that you have in a certain column, and you have the rows. You have the ability actually over here to have row ownership in case someone is going to be updating a certain role within your department. You could do that. You could also edit the table properties such as the name, the description, the recipe name, the primary column, which is the first column. Let's call it recipe. Application, we call it recipe, plural name, here we go, recipes, application and the application. This table contains recipe ingredients and the cooking steps. Excellent. And here we go. Say. Now, I've enabled the header column over here. What does that do? Once I toggle this off, these turn to regular rows, right? Here we go. Recipe name, ingredients, cooking step. These are just regular rows. If I click this on, they vanish. It means the heading of the column is actually the first row. So this is the first thing that we are at. We have actually selected the Canvas application. We have uploaded a CSV file. We are not going to go for a model driven application, since this is a bit more complex, we're going to leave it for a further advanced application for a separate course where we dive into power apps with extensive details in case you are looking forward to develop further in that. But since this course is at the essentials, fundamentals, and the beginner's level for someone who's transitioning from having no idea about Power Apps and looking forward to follow up with the current growth in the market in terms of work efficiency and optimization, this is a great starting point for you, which will equip you with the essential knowledge that you need to take your learning curve to a whole new level. So once we are done with that, we are going to click Create over here. And once we do so, since we are going through the pre built setup rather than creating it from scratch, what Power platform is going to do, it's going to actually build connections between the columns in my table. If things they make sense in a certain way, how are they connected? It's going to do so once I click Create the application, and it's going to present for you the what we call as the prototype, let's say, the foundational application, which would make perfect sense. Let's see how. Click on Create application. Now you're going to be prompt for this window, which says, we're creating an app for you. And Lule is going to be building the application from scratch with no code whatsoever up to the current point, like I've mentioned. And it's going to connect it in a way that makes perfect sense in terms of utilization. So how does that look like? So as we have seen in the previous lecture, we have seen the elements page of the Canva, the interface, and that was the reason why I dedicated a certain lecture for that to help you transition to this part with ease rather than being surprised with all of these navigations. Now they look familiar to you. Now, here we go. So this is the fun result. Start optimizing your app or preview your application. We're going to transition to the upcoming lesson to the next lecture where we are going to actually dive into this. We build our application and to see how it works. 13. The Initial Power Apps Step for App/Web Development Applications: And welcome back. Now we have actually constructed the foundation of our application, and on a side note, this is good to go, by the way. But if you'd like to customize it to actually add certain elements to it, I'm going to show you how. So once I click see a preview of this app, here we go, where does it take me to? To the Play button that I told you about, right? So I'm going to click on Play. Here we go. Now, this is our application, and this is the basic foundation to our application, by the way. So the Power platform tried to make sense of our data in a way that would make sense to connect it. Now, as we can see, we have a navigation button over here. We can just simply type, let's say, spaghetti. Here we go. It was able to filter it out. How about beef? Excellent. We're able to see that when I click on the search bar and I type something, I'm able to filter the recipe's name. I can see the cooking steps. I can see the recipe name, the ingredients, and the cuisine type. Okay. Now, let's try to see how does this thing work as well. How about if I click on you, what does New do? Excellent. Now, it gives me the ability to actually create a certain modification to my recipe. So, for example, cooked beef with taco seasoning, this is ground beef. And I can see that the arrangement is not the way that I would like it. So I'm going to fix that at a later stage, but now I'm exploring how the navigation or the setup suggested by Power platform works. So I'm able to add cooking steps add ingredients, call it a name, and then pick a certain cuisine type, but it didn't display it in the window. So this requires modification as well. Then once I click, yes, it's going to update this over here. Excellent. So I'm going to click Cancel. So this canceled the previous record. Perfect. So I'm still exploring how the application has been constructed to draw some inspiration from. Like I mentioned, since you are going for a no code or low code application design or development process, once you upload here data, and you have the prototype or the basic application which has been generated by the Power Apps platform, then it's good to have an idea about certain limitations or certain things that you would require to modify. So if I click on this, for example, I could edit. Yes, here we go. Excellent. So this allows me to actually change certain elements, Chekhuka, for example, Light. Here we go. And then cuisine type requires modification. It's not added, so I'm going to click Save. And what would this do? It's going to here we go. Change the name. Here we go. Take a look at this. So you're updating the record. Here we go. Our application is shaping up, actually, in which at this current stage, you have recipes, and these recipes are present in your application. If I click on them, I'm able to see the recipe name at the top, the cooking steps, the ingredients, the recipe name, and the cuisine. And these buttons over here, this allows me to edit a certain recipe. Let's say scramble eggs. I'm going to delete this. Here we go. Egg fried rice with seasoning. Okay. I'm going to click Save. And similarly, if I would like to delete something, I have the ability to click Delete, and that will get the job done. So as you can see, these are basic applications arrangement, let's say, from the tables that I've given. So the logic is as follows. We created the tables in our data verse, includes columns of data. For the sake of demonstration, we are building a recipes application. We generated through the pre built application model, a Canvas model, in this case, and then Power platform is going to be making connections between the data. That way, it's saving us time and effort going into the tables and trying to connect every single piece of that by itself, which is time consuming and would involve some advanced practices. So we are able to bypass this and get up and running with our application. So we have seen that. This is satisfactory. But if I'm going to be launching this app, it needs modification. It needs updates. This is where we are going to transition right now to include what I've taught you about the previous elements of integration within the Power Apps, things that you could insert, things that you could modify, and we are going to actually take it up one more level in terms of constructing the application. 14. Power Apps Hands on Project Step by Step ( Part 1 ): And great work on making it this far. Now we have seen the initial buildup from power platforms. It's time for us to actually build it and modify it and find unit, keeping in mind, we're going for a zero coding approach to help you get up on running with power apps. Now, in front of us, we have the canvas, and then on the left side, we've explored the various elements and what do they mean? And you'll notice that we have the copilot over here. What is the copilot? It's the artificial intelligence version for Microsoft. It has the ability to actually take your prompts and effect or modify the canvas that you have without the need to go and start tinkering with the functions or modifying things. I'm going to show you how to help you save time, save effort, and bypass the whole coding requirement. So I'm going to close it for now. And if you would like to navigate back to it, you're going to click on the ribbon at the top over here to actually access copile it again during your coding or development journey. And I'm going to zoom in for the sake of demonstration purposes. Keeping in mind, you're going to treat this like a piece of art, and you're going to build it from the ground up. Now, as we notice, we have the general canvas displayed over here, and it requires a certain level of modification. So I'm going to walk you through the steps. First of all, this is called recipe. Let's consider this to be the recipes screen, one of the screens. So I'm going to change the name. Simply click Double click over and type. What would you like to cook today, since it's a recipe application, and I need to change the colors, so I'm going to navigate to the tables on the left right side. So you always go between this one and that one. So I'm going to close this. Now, let's modify this. I modified the text. I could change the fonts. How about we go for bold? I'm going to place it in the center. Let me change the filling. Since it's food based, let's go for red color. Sounds good. You have the ability to modify this and tinker with this as you would like. You could add borders, for example. How about a dotted border, and we'll give it ten. Here you go. Now you have the ability to add some sort of visuals to your display. Sounds perfectly fine. Now, if I notice over here, I would like to change the order or the arrangement of my display. So I'm going to click on this. I have the ability to modify this recipe. So let's modify it first and then change the order. So I'm going to click on add new recipe, and this by default is going to change the text over here. Here we go. Add new recipe. Everything that you see on the screen could be modified. Okay, keep this in mind. So I'm going to click on the Plus button and I'm going to change the color for that one to red as well. Search bar. Let's change the name and go for search for a new recipe. Here we go. And then I'm going to change this to the color red as well. So everything seems quite organized and everything seems quite aligned, default value. This is a text format, hint text. Actually we searched for something here. Here we go. Let's change it from here. Search for a new recipe. Here we go. Now it will be displaced properly without altering the menu at the bottom. Keep in mind, as you go about this, you might find that you have something in mind, but from the default Power platform buildup, it has been integrated in a different way. So you need to have some workaround around it rather than building the whole thing from scratch. Now, let's take a look at the display. So far, everything seems quite satisfactory, but I need to have my menu at the top under the search and then add recipes, makes sense to go at the bottom, right? So I'm going to click on the Lemme zoom in to see how things look alike. Okay? So I'm going to click on this. Here we go. Okay, now let's go to the tree view. This is the side container reorder, move to the right to the left. Actually, we need to modify the one at the top. How about can we move this as well? Well, it still moves to the right and to the left. It's against our perception of it. The whole reason why because let's try one more attempt. Move up and down. Yes, we're able to. So we have to be careful with this. We have to navigate this. I'm able to move the separator, but I'm not able to move the add new recipe. Why? Simply due to the fact because it was pre built within containers. So if I take a look over here, this is the whole container, the full container, the sidebar. And these like the display menu over here, you can see right now. Yes. This has not been built in the same menu. But since I was able to access it right now, let's try if we were able to move it up, yes, we can. Here we go. Move it to move one level up. Perfect. So you have to experiment with this because sometimes you have something in mind, but as you go about this, you notice the arrangement in the tree value is different. So you have to click on every single one of them to see if you're able to actually modify it or not because you haven't built it from scratch. You're using the initial canvas and the initial arrangement to go about this. So this is a great way for you to be able to learn things easily. So I have the ability to add a new recipe at the bottom, then search for a new recipe. Excellent. But if you notice, the recipes, they do not look quite proper. And now I'm going to walk you through a problem that you will face if you do not have your tables set up properly at the beginning. So let's click over here. I'm going to click on my layout. And since it's a recipe app, it would make sense to have images and titles, right? Now, this is where the problem comes into play. First of all, if you notice I have the ability to modify the image. If I'm going to click on modify an image, click on Edit Stockimage. Let's go for food, for example, wherever it is, and here we go. Look what happens. It modifies it for every single one of them. And this is a mistake which is done at the tables level. When you're adding your columns to the table, make sure that for every single recipe, you do have an image column that resonates with that recipe, even if though it's blank, but once you add an image over here, that will be unique to every single one of them. Because the recipes that we have, if you click on any of these recipes, every single one of those recipes has a name. I got cooking steps, a recipe name, and ingredients, but it doesn't have a place for image. Yes, no column for image. So when I add an image, by default is going to add it to all of them as if they are the same value. So keep this in mind. So either we have to go back to the tables and modify this or we have to jump into a bit of code to do it. So I'm not going to jump into the code. Feel free to go back to the tables and try to add a column and try to tinker with this again. So the alternative is, let's go for a different layout for the sake of simplicity. This is part of the development process. Let's click on title, and then I change it to a title format. But what I've noticed is, it's not showing me the titles. Why? Because I need to sort my fields. It means the titles I'm seeing over here, it's picking up which column from my table or the CSV file. Now, you do have things pre built up for you. Let's go for the recipe name. Here we go. And we're able to see it. Excellent. I'm able to see my recipe names over here. Everything sounds quite perfectly fine. But if you notice what happened, it just simply pushed away my display bar, the plus button. So I need to reduce the height a bit. How about we keep 600? We got the width is fine. How about the height? Let's go for 500. Here we go. Excellent. And once again, this is a visual edit. You're able to edit these things visually. So you have to go back and forth to make sure everything is quite align. So I got my search bar. I got my recipe names. But if I need to navigate this, it's quite problematic, right? So let's click on this again, go back to the gallery, add navigation, show navigation, if you have the scroll item. You have a scroll bar. So once you go for the playing, you're able to do it. But if you'd like to just simply jump from one recipe to the other, it will display a navigation pan over here. Okay? So everything is shaping up quite nicely, we have, what would you like to cook today? How about some visuals? So I'm going to click on the container that I would like to add a visual too. So you have to be careful with this. If I click Add a visual over here, I'm going to say, insert in image, right? Now, you are going to get stuck. Why? Because the image is going to be displayed over here and I'm not able to move it, right? So what I'm going to do in this case, I'm going to click outside the canvas, and then I'm going to click on an image. Now I have the ability to move the image freely. So I'm going to move it to this part over here. Since this is quite static, what I mean by static, the menu at the top does not move because if I place the image here and here and here, there is a way to do it where I bind this image, where I bind the image with every single title. But as you scroll up and down, the image will get stuck, right? So this is an advanced practice. Now, let's click on this. Here we go. Excellent. Now edit the image, stock image. How about Cook it. Here we go. There's a kitchen. Pizza. It's up to you. Let's go for pizzas. Here we go. What would you like to cook today? And I'm going to add the image within the display. Let's upload it again. Kitchen. Okay. We got cooking. How about insert. This works fine as well. Excellent. And you have the ability to edit the image as you would like. You have transparency, display mode. You're able to fill Let click on fill. It changes the filling across the borders. You have the ability to create a border for the image. You're able to have a background filling. So you can tinker with the just simply to have an idea how you could go about this for your own unique situation. So things are quite shaping up right now. So we have the display name for our menu items, correct? And then we have the buttons where we could edit. We did not change the color for these that changed them. Here we go. Okay. Then another change for the color as well. So I'm walking you through the whole design process and the building process. Now let's take a look at this. I'm going to change the display once I click on a recipe. So if I click on spicy garlic chicken, now the application will transform it to this page. So now I need to deal with this. Spicy garlic chicken. Let's fix the label, and I'm going to change the font size. Let's go for 18, for example, spicy garlic chicken, and you could just simply have a border it's up to you, text color, it's up to you. Let's go for red color. Here we go. Excellent. And now I'm going to add another image if I would like within this container or I'm going to click outside, and that's just simply insert in another image. Here we go. Let me zoom out, click over here, insert in image, and I'm going to add an image for spicy garlic chicken. Excellent. Here we go. Now, keeping in mind, you could add your own images. I'm just simply using stock images. How about spicy? We don't have anything. How about chicken? Okay, this will do. So we're able to have spicy garlic chicken displayed over here, and then we are able to see the recipe, the breakdown, the cooking steps. So what I'm going to do right now, I have the ability as well. To change the layout. Again, it's up to you. So for this layout, you could have a vertical layout or a horizontal layout. It either could look like this or it could look like this. So when I'm having my data, now, everything is quite retrieved from my CSV file. You click on the fields. Now it's up to you to arrange them. So let's go for the ingredients first. We get the ingredients. Okay. Then we have the recipe name. Let's put it at the top. Recipe name. We get ingredients, and then we got the cooking steps. Excellent. So we have the recipe name, ingredients, and we do have the cooking steps such that you're able to navigate this easily. So let's click on the data source. Here you go. And for the views, This is the recipe, table that we have refreshing the data in case of any changes on the data sources that you have. Then you are able to edit the fields for the recipes. You can remove something or add something. You could add a new field if you would like, for example, who's the owner? When was it modified? Let's say you modified a recipe. Who's using it? A certain time zone created by who? All of these things that could be added. Here we go. Let's add them. Towards the end, this is going to be a visual text, okay? View text. This is not required, so modified on again. Here we go. So in case someone goes about building this, right? They were able to see when was it modified? Here we go. When was it modified and who created this? So if you're using this application for your own preference, for your company, whatever it is, you have the ability to do so. Now, if we take a look at additional modifications that we could have, let's take a look at the information. I'm able to modify every single field by itself. Like every single field that I have, ingredients are locked because it's saved in the file. Cooking is locked. You need to be the admin in order to do so created by who? So you get the idea up to this current stage when you're adding your data. So you have two columns. We got vertical layout. We could have more columns if you'd like, about three columns, recipe ingredients, cooking steps. You could go for about six columns. It's up to you. You could just simply tinker with this or just simply one column and everything is quite laid out under. Like the one column approach because it covers the data that you have, and the information looks quite proper. Let's increase the width to about 600. Here we go. Now, let's keep it 300 and the height is 600. Here we go. Now, we increase the height a bit to fill the screen. Excellent. Now, let's see if we have any modifications that we need to do. Okay, everything seems quite aligned, yes. Here we go. Let's give it a spin. Here we go. We're able to modify it as well from over here, and we're able to modify it from well over here and the same thing over here. That way we have sufficient spacing. We have sufficient spacing that we're able to have all of the information presented or laid out for us. Now, if you take a look at the data, the information. All of it is quite present in this current case. But I need to This data is locked. Why? Because you are not just simply modifying the data. You're able to just simply access the data. So we have the ability to actually change the display, how the data is going to be displayed. We have single line mode or paragraph or multiline mode. Here we go. So you have to be quite mindful about these things based on your application. You could have it as password protected. Again, it's up to you. So we got our cooking steps. So I'm going to drag this at the bottom. Here we go. Excellent. So as you can see, my display is getting modified slightly. This is these are the ingredients. Once I click on it because you might want into the problem of having the data displayed just simply as a single line. So how would you go about this? Just simply you can go to Iga texts, which is the format. You can place it in the middle. This is where you go about this mode, have it as a multiline. And as a multiline text, you're able to have everything quite clearly laid out for you. But once again, you need to tinker with the process, like I keep mentioning this. It's not just simply a just go about creating it and building it, and that's mainly it. You're actually creating an application from scratch. So you need to have the ability to actually go about all of these necessary steps. Keeping in mind, you have a scroll button over here, yeah. So once you click on Play, you're able to see all of these things getting displayed to us, and we are good to go. So we got a recipe name. We got the ingredients. And if you would like to do one thing, also, how about you can just simply copy this image and then add an image, and you could add the image over here. Here we go. And then we're going to change this chicken to actually something more related to it. How about food? And let's look for something which resonates with this in terms of cooking. And here we go. W. So as you can see, now we are building our application, right? We could add a border to and let's go for a hover color. How about change the hover color to red. And then I'm going to go for This is a fit image. Borders. I'd like to go for something which is solid line. The color should be also red. Here we go. Take a look at this, let me fill the image. Here you go fill the whole thing. Perfect. So as you see, from a basic integration, I'm walking you through the steps what I've done so far. So we were able to get a table, any CSV file. And in this current case, I'm using it to build a recipes application. You could use it for whatever purpose that you'd like. Now, I'm able to actually find unit. I modified the graphics, how it looks like, added certain elements the way I would like it to take place. And you could do the same thing for every single one of those recipes. That way, you're able to add the data easily based on a certain format. Just simply move them from one recipe to the other. If you recall, we talked about components, where you could just simply select all of them as a single component, and you can just simply add it, but you have to be careful components are only applicable when you need to make sure that everything is the same. So instead of doing that, we can just simply copy the whole thing. Like, select the whole thing as is, right? And then you're able to copy it to different recipes over and over again based on the fields that you are going to be having. So that way, you're able to navigate from one place to another quite easily. Now we're not done yet. Now I'm going to show you how would this look like if I'm going to test this out. So at this current stage, we are ready to test this out the food recipes application. But obviously, I'm going to take a bit further to add some functionality it and help you have a clear understanding and draw an inspiration for your own purposes. So I'm going to click on, first of all, sync, just to make sure everything is quite fine. So we check all. Everything seems quite okay. Let's click on play, and this is our application. Excellent. So if I click on the lemon herb recipes, look what happens right now. This is very, very powerful. And frankly, speaking, I'm very impressed with the result. Once I click on the spicy, let's go for the search part first. Here you go. Spicy. Spicy garlic chicken. So we got this one over here. This is a spicy garlic chicken. We got the ingredients, right? Let me clear the display. Lemon herb. Here we go. Recipe name, ingredients, cooking steps modified on created by who, and you have the ability to scroll up and down if you do have any additions. So what you have noticed is that the image for the cooking over here and over here, it's being duplicated, and the same thing for the chicken. And there's a reason for that. First of all, the images are not part of the tables. This is one. And by the way, we have a nice hover effect which we have added. And second of all, we did not add the image as part of a container. So for the ingredients part over here, if I add the image over here and connect it to this ingredient only, then that image will change based on the ingredients or based on the recipe. This again, takes you back to the problem that I told you, I'm going to walk you through, which is not setting up your tables properly from the beginning. So once you have your tables set up from the beginning properly, where every single recipe has its own image designated right next to it, this will be just another task where you have an image and just simply pick a field for it, and that's mainly it. But again, we're walking you through the process to see how things work out. And we do have the scroll option in which we are able to scroll through the ingredients in case the text is not fulfilled completely the same thing over here. We can scroll through the ingredients. We can scroll through the ingredients and the ingredients. And this is very, very nice. And this is very, very powerful. For a basic application. This is very powerful. Even pro developers, they get stuck in that process. But are we done? Of course not. We're going to take it one more level. We're going to take it to a different level, actually, and see how things actually work out in terms of fine tuning the application and taking it to another level for you to get some inspiration from and to draw some inspiration from to help you go about building your own applications with no code requirements. 15. Power Apps Hands on Project Step by Step ( Part 2 ): We have built our application up to this current point, but we need to take a one level further. Now, like we have mentioned, make sure that at the beginning, you're able to utilize the full implementation properly, get your data right from the get go. Now, if I click on play to see where we at right now, everything seems quite in line. Everything is changing properly. Now, the image would have been changed properly if we've added at the beginning an image for every single recipe as part of our data. If not, then we have to actually modify the data and connect it through a bit of code, which is again, beyond the scope of this current level at this current course. I'm going to test the functionality. Let's say I would like to edit this record, Ti green chicken, update. Then I'm going to click Save and it's going to be loading the data. It says updated. Let's go back. Yes, here you go. It's updated and modified at this data on time. Excellent. I can see that now, I have a functional recipes application, and I am able to edit or delete any certain application or any recipe that I would like. Now, as I can see, I didn't test the add a recipe icon. We have the ability to search. Let's click for spicy, and we're able to find spicy. Here we go. Spicy. Yes, spicy, garlic chicken. Everything is working perfectly fine. But I'm going to fix the navigation of it at the bottom, just to make sure we are able to see that everything is quite aligned. Here we go. Let me delete to go back in play and everything is in check. Now I need this to pop, right? So I'm going to reduce slightly the width of the or the length of the bar or let me move it to the top to the tree view and then scroll all the way down. Where is it? Here we go. I'm going to go reder we can move it to the left or right. No, not really. We're planning on shifting it to the bottom or to the top. So I'm going to have this red move down and still, not yet. Let's shift it even more. Reorder, move to the bottom. Here we go. So it's at the top right now. As we can see this because we've added the ability to scroll, so now we can just simply navigate. Here we go. I can see the scroll button did not pop yet, but the ad New is there, so I'm going to hover back, click on the display over here, go to gallery. I'm walking you through these steps for you to actually understand how to go about this. So navigation show the scroll bar. This is one, show the navigation. It's enabled any transitions. How about Pop, which is good. And then let's try to display this. Here we go. So if I click on this, now, the last recipe, it seems over here, which is the beef, stir fry, broccoli in this current case. So that's why it's not showing that we have the navigation. But if I have more recipes, let's add a new recipe. Now, it prompt a window, recipe name, ingredients, cooking steps. Now, let's call it test. Recipe. One, two, and three. One, two, and three. And let's save it. Here we go. We have a test recipe and look at this. Now it pop. Now I'm able to scroll up and down. Why? Simply because I have more recipes now, right? So if I click on test recipe, the record has been updated at the bottom. Now, you do have the navigation to go for the top, bottom, and keep on scrolling between these recipes. Let's add one more recipe. How about XYZ? XYZ. Now you get the idea. Now you have a fully functional application, by the way. Here we go. Excellent. So we have the ability to scroll up and down because we're adding more records. Now the navigation has been enabled. So you have to be quite mindful of that. So we got the test recipe and you got these recipes. This is a very, very, very nice application by itself. Just simply you're able to take a look at the recipes, update the recipes, modify the recipes, and actually have either editing on the recipes or actually come up with new brand recipes, brand new recipes. Now I'm going to take it one level further. This is just simply one screen. Now, you could have layers to this. So how do you go about this? Click on Tree view. Click on your screen. Now you do have the ability to add another screen just like this, it's up to you based on your preference. You could go for a header form. You could have a list. You could have a tutorial image. You could have success. Here we go. How about let's go for a success display in which once you are done cooking, okay, you click on great and then this will take us to a success page. You are able to get creative with this as much as you like. So let's create a success page. Here we go. This was successfully completed. That looks fine. This was successfully completed. I'm going to change this a bit. We can also change the icon. It's up to you. You can go to the icon at the top, and you can have checks. You could add whatever it is that you would like to have. How about like or dislike? Let's go for like, all dislike. Here we go. Sounds good. And I'm going to move this to the top a bit, and then did you like our recipe? I'm going to move this over here. Let's add an image. You can change the theme, by the way, used to be on the same page with all of your designs, yes. You can just simply change the theme if you'd like. Here you go. This has been applied to controls. Here we go. Yes. So it has been modified based on the entire theme. You need to be mindful of this. You could have a button if you'd like to navigate, as I'm going to teach you right now, or you could have certain containers. Let me show you what are the containers. You got horizontal container, or you got a vertical container. We're going to take a look at these containers at Advanced applications because like I mentioned, the applications are endless and you can get quite creative with this. You have the ability to go for text. You have the ability to go for an icon. You can have a progress bar. How about a progress bar? Let's see this. So I'm going to close this and let's take a look at a progress bar, and I'm going to d it over here. Here we go. Did you like our recipe? And I'm going to edit the progress bar. So let's take a look at this intermediate of here you go. Excellent. This is very, very nice, very, very powerful. It adds a visual appeal to it the progress to this kind of screen. And I'm showing you some basic applications to help you get some inspiration from. So you got yourself a nice progress bar. Did you like our recipe? And I'm going to add an image over here. Now we're going to have an image. Close this. Okay, here you go. We did not select the image. We're going to go backwards. Here we go. We got two images, so we got one of them on the canvas. We're going to stretch this up a bit. And did you like our recipe? I'm going to say, edit, stock image. Let's say, happy or feedback. Let's click something else. How about smiling? Just to make sure that everyone is on the same page with your recipes, and they're quite happy about it. There you go. Let's take a look at this image, for example. Did you like our recipe since they are using an application? Here we go. Excellent. So now, you do have two screens, the recipe screen, and another screen, let's call this. Let's rename this. We're going to change the name for the screen or keep it as a screen number two for the sake of simplicity. But if you'd like to rename it, you can just simply go to the display menu on the tree bar. You get a recipe screen, and you get screen number two, and you have the ability to name it. It's called feedback. So now we're getting a bit advanced. You have the ability to jump between your screens from the tree navigation menu, from the tree pane over here, Tree view. Or at the bottom from the screen toggle option, and you can just simply select whatever screen that you would like to work on. So we got the feedback screen. Now, is list looks a bit empty. We could add some graphics. Let's try to add some elements, things which might be helpful. Keeping in mind, the application is quite endless. You could add a form, you could add a table, you could add icons, avatars. Let's create or a badge, for example, or information button, or a link or a timer. Here we go. Let's add a time. Here we go. And here you go. Let's click on this. And then for the text for the duration, repeat, Auto start starts by itself. Display mode, we cannot edit this, and we are going to go for text. Keep it as it is, just for the sake of demonstration purposes. Did you like our recipe? And then Here we go. You can have a timer over here for whatever it is just simply as a matter of feedback that you could get duration. We got 30 seconds, and you could add bonus code or whatever it is, based on your business, based on your application, it's up to you. You could add also a video, audio. You could add an image, an HTML file. You could have the ability to export it, import it, whatever it is. I'm showing you the endless possibilities for you to go about this. Like I mentioned, this is a foundational level. This is a basics level, but the applications are endless, and I'm walking you through the display of the things that you could insert to get some inspiration from, to get some ideas to help you draw some inspiration from for your own application. How about we add a checkbox if they like it or not? Here we go. Or a slider. It's even better. Let's add a slider. Now, for this slider, we're going to place it over here. Why, if someone liked it or not, we're going to place it over here. This is default. Horizontal maximum is ten. Minimum is zero. Show values, handle size. Let's increase the handle size a bit. Quite too much. How about you keep it in the 35 range? Here we go. They're able to toggle this. Now, they could add this. Yes. This is quite nice. We have the ability to actually modify our bars, our display. You can place it on top for some visual effects. That way, they're able to move the scale, and let's see if we're able to actually display certain elements. Let's have a hover color. Okay, here you go. Value hover, that's change the color a bit or keep it as it is. Like I mentioned, I don't want to tinker with too many things. That way we don't go into the coding end where you might get some issues along the way as we are going to be keeping it as low code, no code whatsoever, keeping things quite in line and straightforward. So we have the ability now to go about creating a timer. Let's remove the timer. Everything's quite fine. We have the bar. Did you like our recipe? Let's get it to the top Ove over here? Did you like our recipe? Here we go. Now, let's move this over here and this one to the bottom. Like I mentioned, you have to get quite visual with your approach, and we got a toggle. Excellent. Now, you do have a very nice looking feedback page, and it's up to you now how to go about this at this stage. Now, what I'm going to do right now, I need to jump or connect between my recipes or my screens. So I have one screen, which is my recipe screen, and I have another screen, which is my feedback screen. So how do you connect between screens or how do you navigate from one screen to another? And this is what I'm going to teach you up next. 16. PowerApps Hands on Project Step by Step (Part 3 - Navigation and Customization): Welcome back. So we have managed to create our feedback page, sort of speak, and we have managed to test it out, and we're able to toggle the bar 0-10 to share some feedback. Here's an advanced tip. You could actually link this to your own database or your own tables on the data verse and update them with the feedback, such that whenever anyone uses the application, they could share the result and the numbers will be automatically displayed on your set of tables or data, which is an advanced tactic. Now, for the current lesson, we are going to actually see how could we navigate between the various screens. Since we have an application and the application requires multiple pages, multiple screens for an interface, right? So for example, over here, I do have the following screen that we have managed to create. Then we have a feedback screen over here, and let's say, I would like to have someone who is using the application give me some feedback. As they are going about this. So what I'm going to do right now, I'm going to utilize the power of buttons. I'm going to click Insert, type in button, and I'm going to select the button which has popped over here. And let's edit this button together. I'm going to say, click to share your feedback, okay? Like any other item on our screen, we could edit this. We could go over here. This is an editable button. Basically, we could just simply click on it and edit it as we go about it. We could have multiple effects. It's up to you. Simply can toggle with this. You could have borders, you could have border radius in case you would like it to look around it, for example, like this. And we would like to add some functionality to this. Now, like I mentioned, we're going for a no code application. We're going for a no code practical example. So how would we go about linking this? This is where we get quite tactical. We're going to utilize the copilot. So I'm going to click on this, and then we have to be careful here. So this is the button, right? This button has a name. We can see the name over here. It says button number one. So I'm going to tell the copilot AI that I want you to link or to modify button one, to navigate this is very important. Mention the word navigate because as part of the functions over here for advanced practices, there's the function of navigation. Once we select a certain item as part of the select, we have the navigation. So I want you to modify, but I want to navigate to the Now, this is where we have to be careful. This is the recipe screen. This is the feedback screen. Do not type the word feedback screen because it will take it literally. So I'm going to say to the screen, open quotation marks Feedback. Here we go. So what does that mean? It means when I click this button, I want you to navigate to the screen which is called feedback, which is the name of our screen. Now, then I'm going to click Enter. Like I mentioned, no code, zero code, we're getting quite tactical, and we have endless applications and modifications. But at this level, like I magied, I'm teaching you stuff that will help you get and running, saving you time, saving your effort, getting you the expertise that you need to actually get up to the game when you are going about this. So let's try to implement this. So I got in some feedback from copilot to modify button number one to navigate to feedback screen, you can set the select property. So I don't want to do this by myself in terms of using coding or trying to select Unselect and then click Navigate. We can just simply click over here, and to help you get the idea, we click on Navigate. So I don't want to use Navigate like I've mentioned, zero coding. So I'm going to mention this by myself over here. So change the button or make the button. Make the button once clicked to go to the screen, which is called feedback. Now click again. So as part of the prompt engineering practices, it's part of back and forth communication with artificial intelligence. Now it's going to actually understand that I need to make this button clickable. Sure, this change was made. Let's take a look at the change. Once selected, change for button number one. So how do I check this? Go to play. Here we go. Now, click the button, and here we go. Excellent. Now we're able to toggle back to the navigation. This is very powerful, right? Now, once we are done with the review page, we would like to go back. Okay, so how do we go about this? Again, we're going to follow the same approach, but now I'm going to show you how would you do this completely with copilot. I'm going to say, add a button that once clicked will take me back to recipe screen to recipe, space, screen, and close the quotation marks. Here we go. So now it's going to create a button, which will allow me to navigate back and forth between my screens. So I'm going to put it over here. Let's say, change the title, go to recipes. Here we go. So we can put it at the bottom once we are done. Now, let's test this out. Click and we are back. Excellent. Now you have an immersive application which you are able to use to actually find recipes, add recipes. You can actually share your feedback once you are done, and then you can go back to your recipes. Let me just simply add it add one more level to it because I always like to have a full functioning experience, a full functioning implementation. 17. Power Apps Hands on Project Step by Step ( Part 4 - The Complete Build Up ): Welcome back. So we've managed to build the interlink between our recipe screen, feedback page, one more one to check everything is going perfectly fine. We're able to go back and forth between them. But obviously, when you start an application, you're not going to just simply dive into the interface, right? So let's have one more page. I'm going to have one more screen. Just like a blank page or split screen, it's up to you. Sidebar. You can get creative. You could tinker with these as per your own preferences. Let's have a split screen, for example, and I'm going to add two different items over here. We got one on the side and one on that side. And once you click over here, you have the ability to add whatever that you would like to have. So I'm going to add text. Here we go. Simply a text label. And I'm going to call it welcome to our recipes, application. Here we go. And now we need to modify the text a bit and just to make sure that everything is quite align. Now, we need to make sure that the width is fine. How about the width. Let's change it to 600, for example. Let's take a look at the height, about 1,000. Now we can see that it's shaping up right now, and let's make it 600 as well. Now, as you tinker with this, obviously, you have to take a look at everything and make sure that everything is quite aligned. Let's reduce this even more because I would like to add an image. Welcome to our recipes application. Let's make it 500. And then we're going to center this. Place it in the center of the container. Welcome to our recipes application. This is very good. And now let's add some items. How about Let's explore stuff that we could add that we could make it pop or stand out. Now, keeping in mind, it's up to you to go about this to see the stuff that you would like to do. I'm walking you through them in order for you to have an idea how things work out. Let's add a three D object for the sake of demonstration purposes, okay? So I'm going to add a three D object for whatever reason it is and you're able to see that. I'm able to modify the object. It's a sample cube. I could have pins, but does it meet our purpose right now? Well, I could place it in the middle or I could place it as a three D model, but it doesn't seem like it fits the purpose. So let's go for something else. How about we could have a video. That would be great. If you could have simply a video from your side where you're actually welcoming individuals or an audio, that will be something which is quite good. You do have the option for shapes. You got the option for icons. Let's have an image which will serve the purpose. But I'm going to place the image over here. I'm going to click on image, and I'm going to edit the image. Stock image. You could add your own images. Of course, let's call it application or again, food and find something which is related to the food application that we have. How about this? This sounds good. Now, I'm going to modify the image again, in order to make sure it fits the purpose. I'm going to go for a fill. Now, it seems that it's quite smaller in size, however, we need to modify this. So let's go for 1,000 seems quite too big, so we need to have 500 for the size. And how about we go for the width of 500 and we see the image. It seems that we can go a bit more. So let's go for 600. Excellent. How about 700 would be a great fit? Perfect. Then let's go for the height of 700 as well. Excellent. Let's go for 800 a bit. Here we go. Perfect. Now we do have a great front page that I could use. Let's change the theme slightly a bit to make sure everything is quite aligned. I'm going for the red theme, which we have chosen. Welcome to our recipes application. We have the hover effect. Now, we could change the color. Why not? Let's go for bold, and we could go for the red color, which is the theme that we have. And we could do one thing as well. Let's try to change the width a bit because I would like it to leave us some space excellent, such that we're able to add some navigation buttons. So this is very powerful. This is very good. But I would like to add an icon, for example, to give us some sort of a visual appeal. So I'm going to click on icon and see what kind of icons do we have? We can have an alarm, a plane, arrow, back and forth. You go bugs, calculator. You do have a lot of options, but I need something which would indicate that we are going to be using this application for a purposes related to a cooking. So let's have this here as a diamond. This will look fine. And I'm going to add an arrow at the bottom, another icon to prompt the user to select something. So arrow to the bottom. Here we go. This is very good. Now I'm going to again, either I could have buttons or I could just simply go to copilot and I'm going to say, add a button. Once clicked, we'll go to recipes page. Here we go. We go to the recipe screen. Do not forget the quotation mark to recipe screen. Now, click Enter. Now as you're going to see, we haven't written a single piece of code, and we were able to actually build the application. Now, let's change this a bit and click on this and type get stored. Here we go. Now, let's modify the text a bit. To make sure it pops. We can go for we get started. We have the filling. We got borders. Let's add some borders. Dotted. We're going to go for ten. That's helpful. Border radius. We got ten, as well. Let's see if that's doable. Yeah, that's excellent. Now, everything seems quite aligned. Now let's hit the play button. Here we go. Welcome to our recipes application. Click Get started. Perfect. We can see our application. Everything is quite in check. Now, we use the recipe. We have the ingredients, the cooking steps. You could get creative. You could add audio. You could add video. How about as you go about this? Let's add a new recipe. Once we are done, we're able to save this. Now, let's say we decide to delete a recipe. Here we go. Click Delete. Are you sure? Now, keeping in mind, like we have mentioned, once you fix the tables, you're able to remove the sport over here and actually avoid the issue of getting the tables. Images not being properly allocated. Now, we had a lesson on that and the implications that it has, so you're able to keep that into account. So that's it for the time being, you're able to actually add, search, record. And once you are done, share your feedback. You click on this. Excellent. How about your recipes? At a further advanced level, you'll be able to integrate this and collect the feedback into your own database. That way you have a grey experience and feedback from the users based on their grey experience. So here you go. You have managed to create a full on application from A to Z using Power Apps. Now we're going to see how could we export and release our app. 18. Getting Your Application Ready Exporting and Launch: Our application is good to go. So we have set up our application. We have click created the navigation. It's fully functional. We are able to collect some feedback, and we are able to go back to it. So it's a very nice application to have. So let's say you've built one of those applications, how would you go about exporting it? First of all, you could either send it to your colleagues by clicking on Share. If you're working within a company, once you tap on the share icon over here, you will be prompt to write down the emails within your organization. The other option is basically when you click on publish, this will be presented in your own administrative display, the apps list that you have created, and the other option would be to actually save a copy of this. So you're going to click on the button over here. And then you have Save As or download a copy. So this is very powerful. This is where you click on download a copy of your application and your file is ready. And once you click Download, you are going to see the application in the form of MsaWPFle which is very, very, very powerful because you're able to then move it from one place to another, and you could just simply upload your application and you could run. Also, you do have the option. Once you click Save, you save any updates on your application, make sure that you do so if you don't have auto save enabled. Now, you could also click Save As, and then you're able to save your application based on a certain name rather than just simply copy. Keep that in mind as well. But there's important thing that we need to highlight. See, before you actually export your application and before you actually share it to your colleagues and before you actually go about downloading your own copy and then moving to a different location, a different device. Click on the three buttons over here. This gives you very important tools. Click on the settings. Now, you could change the background color. You have the background images, obviously, but take a look at the general settings. This gives you a brief description about the app. This is a food recipe app. Then you have the ability to change the icon. You have the edit icon. You could have a rating star, for example, change the color. You could change it to color red based on the application that you want. Keep these things in mind. Auto save every 2 minutes if you would like to save the application every 2 minutes instead of saving it manually. Could be quite helpful. Would you like the app to be used offline? If you click, yes, you have the ability now to download the app and use it offline, not just simply online, but you have to make sure that you have actually access to the data verse and you have the application on your data verse. So you have the data verse setup. Your tables are part of the data verse, not just simply a random actual file that you have uploaded. Then you have the ability to download the application and use it offline based on the data. Then we have the option to select offline profiles, then you have data role limits and additional stuff about debugging of the applications. Then all of these are just simply by default. There's nothing to be tinkered with. Then you are good to go. You have the ability to click on the display to see how the application is going to be displayed based on the orientation, for example, landscape or portrait. Then you have 16 by nine, you have 14. So all of these are screen sizes. So you have to be very careful with this before you actually go about exporting your application and receiving a copy, we need to make sure it fits for various screen sizes, yes. So landscape or you have scale to fit just to make sure that the application could actually fit on different screens automatically. If this is off, you need to make sure that every single device every single size that you would like to have is actually downloaded as a copy, and you're able to modify these sizes manually. But once you go to scale to fit, it scales the application to fit the available device. As is. Lock the aspec ratio. This automatically maintains the ratio between the height and the width to pre friend distortion. Very helpful. Lock the orientation, keep the screen in its current orientation. Even when the device is rotated, it depends on the application that you have. Click this on if you'd like to have the location or the orientation to flip. Once you flip your phone or your tablet, then you have the ability to have notifications to be visible on top of the screen that you're able to see the time and any notification. If the user is actually using it on the mobile phone and they get a call or they want to see the time on the phone or notification. You can just simply enable this if this is going to be used on a mobile phone or a tablet, that's very helpful as well. So all of these things are stuff to keep in mind before you actually export your app. So let's say we have done all of these settings, we click Close. It means our application is ready and good to go. So what I'm going to be doing, then, if you go to the recipe screen, for example, page, my application is ready. I'm going to just simply add this case, click Save, and then I have save as a certain name or just simply download it as a copy, and that's mainly it. And congratulations. Your application is ready to go. 19. Wrapping Up: What do you think? I truly hope that you found the class helpful. If it helped you level up your knowledge in terms of creating applications without even knowing how to code, then it's a job well done. And I'm looking forward to receiving your feedback on the class and make sure that you follow my profile for the latest releases and updates. I'll see you in the next class.