How to build a Non Conformance Reporting Mobile App using PowerApps | Step by step
What is non conformance?
Non conformance reports are commonly known as NCR. They are used and issued by the quality engineers or consultants who are on site to a concern party who deviated from their plan or specification of the construction project.
This report has to be issued as soon as possible even suggested on the same day for faster circulation of document, thus lesser time consumed for rectification. And this is where this app will be immensely helpful for all the quality engineers on site and using this app, they can create new ncr they can view all the NCR so they can even contact the concerned department.
So let me quickly show you the demo of this app. So this is our beautiful homepage and we have three tabs and the first tab you can directly click on it and you can create a new one NCR report where you have the title, date, and car number, the disposition and you have the department number and you you can write down all the instructions over here and the department responsible. So this is a very simple NCR report. You can change it as a way as you want.
The beauty about this app is you can print the report directly from here and issue the NCR on site, thus saving quite a lot of time for quality engineers. All you need to do is just click on this print button and it will open up the print page where you can print out the entire sheet and hand it over to the concerned party. And we can add the entry book by clicking on this button or we can go back in the view all NCR you can view all NCR that have been issued you can search them using the first name of any of these items or you can add a new NCR from here by clicking on the plus icon.
You can go back and you can even refresh your report. Apart from this you can directly contact the concerned party by sending them an email you can add a message and send them directly from the app. As you guys know, we build apps based on your feedback from our subscribers. And this was a topic that was requested from one of our subscribers. And this is for them. So if you have any new products coming up for your company, or if you are Freelancer who's building an app for another company and if you are having any issues and if you want help, you can comment in the comment section and I will be glad to help if I can and if I cannot I'll let you know and guys if you are finding value from this video, please do hit the like and subscribe button and don't forget to hit the bell notifications icon for instant notifications whenever I post these kinds of helpful videos in the future. Alright without wasting any time let's get started.
We will be building this app in two simple steps:
1. In the step one, we will create a SharePoint list.
2. In the second step we will create a power app using this SharePoint list and configure it.
Alright, let's create a SharePoint list. So first, we will go to our SharePoint homepage. If you have a SharePoint site, just click on this new button and click on list and over here you can either create a blank list or you can use a template but I will be using an Excel document that I have already created. And I have a demo or document over here where I have some columns. So I will be using this Excel document and I will be adding it to the SharePoint list. And over here. I'm going to click on from Excel and I'm going to upload this Excel document. Alright, once I have uploaded the document, I will check all these items over here. So I will change this item. This is selected as number. I'm going to change it to date and time. Okay, perfect. That's correct. And over here, everything is perfectly fine. Now let's click on next. I'm going to name it NCR report one and I'm going to click on Create. And if you want to change any specific columns, just click on them and go to Column Settings. Click on Edit. And over here you can just remove and then click on Save Alright, perfect so This is ready.
Now let's create a power app directly from over here. All you need to do is just click on integrate. Click on power app and click on create an app and just name your apps I'm going to name it. App 20. And I'm going to click on Create. Alright, so we have our app ready over here our basic app. So we have three screens over here on the left hand side. And we have our platform over here where we can configure the app and create a new one. And over here on the right hand side we have the properties of all the elements over here. Now if we if you want to view the app, which is currently in the basic state, you can click on the Preview button and over here you have a basic looking at where you have all your items. You can do them, you can edit them, you can delete them, and you can go back you can add a new NCR report.
This is the beauty about Power Apps. Power Apps is a low code, no code platform where you can build this amazing and extremely helpful applications with no coding required. Alright, so let's go back. I'm gonna close this. Alright, the first thing that we're going to do is we're gonna rename all the three screens, all you need to do is just click on these three dots and click on Rename, and I'm going to name it a screen one. Alright, and I'm gonna name the other two screens are screen two and screen three. Alright, perfect. So now we have three screens. So the next thing that we're going to do is we're going to change the theme. So over here, I'm going to select the light green. Alright, perfect. So now we will add two new screens for that all you need to do is on the top left hand corner, click on new screen and add a blank screen. And one more time click on new screen and click on Email screen. Alright, perfect. So now what I'm going to do is I'm going to rename the screen number four as the home. Okay, perfect. So this is our home screen and I'm going to take it to the top over here. I'm going to click on these three dots and I'm going to click on move up. So the first thing that we're going to do is we're gonna start adding an image over here. So for that, what we're going to do is we're going to use Canva for that.
Canva is an amazing platform for content creators and there is a free version of it. So do check it out. So for now, all we need to do is just click on create a design and in the search box, we are going to type in phone and we are going to select phone wallpaper. And the beauty about Canva is that there are so many pictures that are freely available in the free version so you can use it in your applications. So I will put a link in the description below do check it out their free version. So over here, I'm going to select this specific Picture and I'm gonna align it over here. Alright, so once my background is ready, all I need to do is click on download. Alright, now let's head head back to our Power Apps platform. In the power us platform if you want to add an image, all you need to do is just click on this option over here and just click on Upload and just select the file and upload it. Alright, so I have the design over here. I have selected the design now what I'm going to do is I'm going to just align it accordingly so that it fits the screen. Alright, perfect.
So our background is ready now let's start adding the elements. So the first thing that we are going to do is we're going to add three buttons. For that you need to go to Insert and click on button. So first we will configure this button then we will add two more buttons over here. So apart from this we will add a label so on the top left hand side, click on label. And let's bring it over here and let's arrange it accordingly. And I'm going to add one logo over here. So I'm going to go back to the media section over here on the left hand side and click on Upload and I'm going to bring in the logo over here. So I'm gonna line it accordingly so that it fits right across over here. Perfect. And over here in the label. I'm just gonna rename it as non conformance reporting. So I'm going to select this Label and on the right hand side, under the text item, I'm just going to change it I'm gonna type it non conformance reporting. Perfect. And we're going to align it in the middle and let's change the font weight to bold. And let's change the font size to 35. All right, now let's align it accordingly over here Alright, perfect. So this was done. Now let's start working on our button. Just select the button over here. And you can change the text and we're going to change the border radius from zero. We're going to change it to 40 and let's increase the size so just stretch from the borders and let's align it accordingly in the middle. And what I'm going to do is I'm going to also change the color of the button. So from here, I'm just going to change it to white and I'm going to also change the color of the text from white. I'm going to change it to green. And now as you can see our models are not visible so what I'm going to do is I'm going to change the border from two to five and this color from white to green. All right, perfect. So our button is ready. So now let's click on it. And you can either right click on it, and click on copy and just paste it two times. That's one and that's too. Perfect. Now let's align it accordingly in the middle. So now we have our three beautiful buttons. Now let's rename the second button over here. And we're going to rename it as veal. All NCRs Alright, perfect. And the last one we're going to rename it as contact. All right, perfect. So now, on the left hand side, click on the street view and over here we have all the screens. Alright, so now let's start working on our screen number three, which is the new screen so just click on this.
So first, minimize everything and just maximize the screen number three and click on edit form. And over here on the right hand side on the Properties section you can edit the fields. You can add the fields by clicking on this Add Field button. Or if you want to remove the fields you can just select it and tap on remove or you can use if you want to move the Fields up you can do that as well. Now, what we want to do is we want to add a print button over here. We will click on icons and we will add a print button over here. Alright so the print button I'm going to put it over here I'm going to change the color from green over here on the right hand side to white. And now the on select function of this button has been set to false. What we're going to do is we're going to set it to print function. Or Alright, perfect. So now if we view this app currently, if we click on this, and it gives us the print option over here and we can print it directly from over here. Now what we want to do is we want the bottom elements to be visible so that the entire report is printed. And we also want to remove these elements or we can even better we can hide these elements so that these are not visible in the report. So now let's start working on them.
So let's go back and over here on the left hand side, click on this rectangular quick action bar. And over here on the on select just click on this arrow and let's find the property for visible right now. It's set to true. So what we're going to do is we're gonna put in an option over here so that it's not visible during printing. So I have set it to not parent taught printing so that it is not visible. So this is done. Now let's view the app. Let's click on Print. Alright, perfect. So now we need to just work on two things. One is we need to hide this one and we need to have the bottom option visible. Now let's hide. Let's go back now let's click on this print button. And let's find the Visible property for this. And it is set to true. So just remove it and just put not parent dot printing. Now if we preview the app, and if you click on Print, now it's gone. Now what we want to do is just edit this text, we just want to have it as NCR report and we will align it in the middle and the next thing we're going to do is we're gonna fix this option over here. So let's click on Cancel and let's go back now let's click on those NCR report one, just remove the one. Let's align this in the middle and just stretch this over here. Alright, that's perfect. Now, on the left hand side, click on edit form. Now over here you have some options for the layout.
Right now the layout is vertical. All you need to do is just click on horizontal. Now as you can see, we have lots of real estate available and our form now we can arrange the elements accordingly. So over here, what we're going to do is we're gonna move all the boxes a bit towards the left hand side. So just I'm just going to select all the items. And I'm going to just align it accordingly. The next thing that we are going to do is we are going to click on edit form and we are going to bring in these this option rework instructions over here so that now I'm going to click on edit fields. And I'm going to click on these three dots and I'm going to click on move down and I'm going to do it one more time. All right, perfect. So that's done. Now what we're going to do is we're going to move this box to the bottom and we're going to stretch this over here like this and the same thing. We are going to do it for the text. Just gonna stretch this box like that. And the same thing. I'm going to do it for rework instructions as well. So that our report looks much better when we are printing it so now I'm going to stretch this over here.
Alright, perfect. So now our form, our report is ready so you can arrange these boxes accordingly, according to your needs. And so now let's try to print the report. So let's preview the app. So this is the entire new screen. So when we click on Preview, Alright, perfect. So we have our NCR report on the top and we have the boxes clean and everything looks good and it's much much better. So this printing feature will save a lot of time for our quality engineers as they can issue the report than in their itself by just printing it from their phone directly to the printer after typing all the necessary details. Alright, perfect. So now I'm going to click on Cancel and let's head back. Now what we're going to do is we're gonna add the navigation over here. So just select the button for the new NCR. So right now on select it set to false, just remove that. Now what we're going to do is we want to navigate the user when they click on new NCR, we want them to navigate to screen number three. So just enter this statement over here navigate screen three, corner Perfect. Now we will do this for the remaining two buttons as well. So let's click on the Next button. And whenever we click on this, we want to be navigated to screen number one where we can see all the new NCRs Okay, so let's remove false. And let's type in screen number one. Select that. Alright, perfect. And whenever we click on contact, we want them to navigate to screen number fight.
Alright, perfect. So now our form, our report is ready so you can arrange these boxes accordingly, according to your needs. And so now let's try to print the report. So let's preview the app. So this is the entire new screen. So when we click on Preview, Alright, perfect. So we have our NCR report on the top and we have the boxes clean and everything looks good and it's much much better. So this printing feature will save a lot of time for our quality engineers as they can issue the report than in their itself by just printing it from their phone directly to the printer after typing all the necessary details. Alright, perfect. So now I'm going to click on Cancel and let's head back. Now what we're going to do is we're gonna add the navigation over here. So just select the button for the new NCR. So right now on select it set to false, just remove that. Now what we're going to do is we want to navigate the user when they click on new NCR, we want them to navigate to screen number three. So just enter this statement over here navigate screen three, corner Perfect. Now we will do this for the remaining two buttons as well. So let's click on the Next button. And whenever we click on this, we want to be navigated to screen number one where we can see all the new NCRs Okay, so let's remove false. And let's type in screen number one. Select that. Alright, perfect. And whenever we click on contact, we want them to navigate to screen number fight.
So just select Contact and just remove false and just change this from screen three to screen five. Alright, perfect. So now what we want to do is whenever the user goes to, let's say screen number five, we don't have the Back button over here so that when they click on the back button they head right back to the home screen. So let's work on screen number fight. So first, let's arrange those over here. And let's click on icons. Let's find a left icon. Alright, perfect. Let's click on this. And let's change the color of this from green to white and let's arrange and align it accordingly. Now in this by selecting this left button, what we're going to do is on the on select Property, we're going to type navigate, and what we want to do is we want the user to navigate to home screen. Perfect. Now this is done. Now what I'm going to do is I'm going to just copy this and I'm going to head over to the screen number one and over here. I'm gonna align those over here. And I'm going to just select this and I'm going to paste this left but for now let's preview the app over here when we click on new NCR, now we have the new NCR screen over here you can enter the title so let's say it's wrong material. So now let's add this entry. And now when we go to view new NCRs so we have a new entry over here. Now when we click on it, we can edit it we can delete those entries and we can go back and from the screen you can also create a new NCR report. You can search for the items directly from Overhill and you can go back to your home screen. So these two buttons are perfect. Now when we click on contact we have our beautiful contact screen where you can enter the email address of the person in your email list and you can send them an email directly from here. When we click on the back, it goes back to the home screen.
So our application is ready. I hope you guys found value in this video and you build some beautiful apps for your companies. If you have any suggestions for future videos, please do mention in the comment section or if you have a new project that you are working on. Please do let us know and we can share it with everyone and we can actually build an application and share it with everyone that will be helpful for all people learning Power Apps.
So our application is ready. I hope you guys found value in this video and you build some beautiful apps for your companies. If you have any suggestions for future videos, please do mention in the comment section or if you have a new project that you are working on. Please do let us know and we can share it with everyone and we can actually build an application and share it with everyone that will be helpful for all people learning Power Apps.
Microsoft 365 Business Standard: https://bit.ly/3HIFYEb
Microsoft 365 Apps for Business: https://bit.ly/3FxhJHh
Microsoft 365 Business Premium: https://bit.ly/3cxp4dn
Microsoft 365 Personal: https://bit.ly/30r9pcR
Microsoft 365 Family: https://bit.ly/30w4VCl
Website: https://www.productivitycentral.ca/
✅ Subscribe now: youtube.com/channel/UCT9eERQLGlXbew8Fjyjv8Iw?sub_confirmation=1
My Favorite Youtube SEO Tool: https://www.tubebuddy.com/Productivitycentral
Download Canva: https://www.canva.com/join/ltt-wvx-fjb
⚖ As full disclosure, I use affiliate links above. Purchasing through these links gives me a small commission to support videos on this channel -- the price to you is the same.
Comments
Post a Comment