Section footer we can start connecting to our data sources and start building out our screens step by step however we now have a modern Suite of screen templates that.
We can take advantage of the responsive design templates that use responsive containers are right here and now we also have additional responsive screen templates that are.
Based upon the modern controls these can significantly reduce the time to build our screens let's begin with the welcome screen.
Template this screen template also has responsive container controls there is a header container in which is placed the modern header control I'll go ahead and upload an.
Containers and there are six sections here which allow us to feature items provide an image title description and the title is a button so we can also take an action when the user.
Selects that specific button I'll go and upload images in each of these containers I can go ahead and set the image of the item that I would like to.
Feature Define the featured item title that's the text property of the button control and give it a short description and I can do the same for all the other items that I would like to.
Feature I've gone ahead and configured my welcome screen this is how it looks like on a desktop experience if I preview.
This on a tablet device experience all the controls are responsive if I change the orientation it's all responsive if I view this on a mobile.
Posts Related:
- Add & Update Excel Data to SharePoint List using Power Automate Excel Import using flow
- Create This AMAZING Excel Application that Tracks Purchases, Sales AND Inventory Part 2
- Reporting Services (SSRS) Part 2 - Data Sources and Datasets
Device the cards align according to the
Real estate a available now if you do not need all the six cards and would like to feature let's say three.Items go and select the specific container within the main container that you would like to delete and delete them the screen automatically adapts.
Itself next we have the header and gallery modernized screen template here as well it leverages the responsive container controls has the modern header.
Control and in the main container is a gallery control that has responsive container controls within it to showcase items that are provided as part of the items property of the.
Gallery now let's feed the data in this Gallery based upon information coming in from our data Source in my scenario I have a simple SharePoint list called asset.
Manager I have a column called device photo that is an image column and I have additional columns that stores information about that specific device let's go ahead and connect my.
SharePoint list to my power app by connecting to SharePoint that's my connected SharePoint list now for the gallery items.
Property I will select my asset manager connected list my list has four items that's why the gallery is showcasing four items the.
Image I will get this information from this item dot my image column called device photo the image position property I'll set to fit so we can see how the gallery.
Shows all the device images from my data
Source the title I'll show the information from my column called Model description I'll get this information.From my choice column called asset type and then I have a button here which once the user clicks we can take action update this as well is a fully responsive.
Screen experience now from my welcome screen which I will rename to home screen I'll update the image this.
Image alignment and container stretch flexible height on Border radius zero the button I'll change this text it's a modern button.
Control if you go to style and theme I'll set the type as primary on select of this button I will navigate the user to my devices.
Screen so let's preview asset list I select takes me to the list of devices in the header control there is a property called on.
Select logo so when the user clicks on this logo I would like to navigate the user back to my home screen so click and back to my home screen and I can repeat the same process.
For other cards that I would like to Showcase in this specific style and I've gone ahead and configured the other two containers in my welcome screen.
I'll go add a new screen and this time select the modern approval request screen template now at this screen template we have a sidebar container in.
Which there is a gallery that can showcase a running status indicator like information now in this Gallery there is a rectangle shape.
Control I'll just change this width to three and preview A Step bystep list of items the items property of this Gallery is what we need to learn in order to use.
It depending upon our use case the template is approval request it has a form control I'll connect this to my data source and when submit is clicked it.
Will submit the data in this form and we can have an approval process via power automate that we can trigger store all the information about approvers in our list and we can leverage that.
Information to showcase the current approval thread right here in this sidebar container there is a property called step that's the step.
Number name title status and there is a property called current which is set to true it highlights the current item in.
Bold I'll remove current from the step one and let's say I pasted in step two so now we can see how step two is being highlighted name and title approv of one.
Radani the batch control within this Gallery shows the first letter of the status we have full flexibility to change this show the step number I can say this item. step and.
That shows the step number the color for the batch control the property is called base palet color if the status is pending set the color to Gold if it's approved dark.
Green if it's rejected red the items property of the gallery if I only have three steps it lists out the three items the form.
Control I'll change its mode to edit and this control I would like to connect to my Gallery selected item in my devices screen the form.
Control item property Gallery do selected I have flexibility over defining the layout I'll show this in a three column.
Layout if I preview there is white space here inside the form control experience for that the data cards will within the form control hold the control.
Key and select a couple contr a so it selects all of them and go and set with fit to on now the cards will be fully responsive I have a status column that tracks the steps through which a device.
Goes through when it is being procured so a request gets initiated an order gets placed the device gets shipped and finally the device is received so instead of.
Reviewers I'll change the text to Stage for my reviewers Gallery I'll try and frame the items based upon the information coming from the status column on start of the app I'll write.
The following code create a collection based on the choices coming from my Choice column called status this is coming in the same order I've set in my SharePoint Choice column now all I want.
To do is put a step number right next to this and for that I've gone ahead and used the following formula I'll run app on start so if you look at the collection.
Now it includes the step number and I also set a property called current and set its value to Boolean false now this collection is what I will leverage as the items property of my.
Gallery now for the title I'll use this item dot value there is another column that allows me to plug in additional text I don't want that so I'll delete.
