Make. power apps.com I'll start with a page design I'll pick the blank canvas tablet to leverage modern.
Controls head over to settings under General I'll enable modern controls and themes so now the insert tab has the modern Suite of controls that we can leverage my goal here is to design a.
Gallery with modern controls I would like to connect to my data source I'll go to data add data and this can be any data source of.
Your choice data verse SQL SharePoint Excel and More in my scenario I'll connect to SharePoint connect to a SharePoint list on my site called.
Gray The Fill property for the screen is set the alpha property I'll set it to 02 so it gets a lighter shade of gray next I'll go and insert from the classic.
Controls search for container I'll pick the container control position it at the top and full width of my screen and in this I'll go and insert the modern header.
Control now all of these modern controls that I will be adding these will respect the theme of our power app so as I change the theme for my app the changes in the theme will reflect in the.
Controls the modern header control has a title property I'll call it projects list it already showcases who the current logged in user is and there is also an option to place a logo here I'll.
Go and upload an image the container has a a property called drop shadow I'll set this to semi bold so you can see how it creates this drop shadow.
Posts Related:
- How To Create A Contact Scheduler Application In Excel From Scratch Masterclass + Download
- 3 Steps Infographics **FREE DOWNLOAD** PowerPoint template / Presentation
- How To Add Image Magnify Effect To Your Website - Live Blogger BlogSpot
Effect next I'll add a gallery to show
The data from my connected data source which is my Project's list the gallery as well I will place in a.Container so I'll add the container control position it on my screen and within this I will go and insert a gallery control I'll begin with a blank vertical.
Gallery the data source I'll pick my Project's list the container in which the gallery is placed the color property I'll set it to.
White and the drop shadow effect I'll make it semi bold we you can see how the container helps to create that effect now I'll select the.
Gallery edit and start inserting modern controls to represent my data to show the title of the project I'll pick the modern text control position it the text property is.
Set to this item. title the modern controls now have a style and theme section where you can set the font the font size the color and.
More the font color I'll pick it from my theme and to do that I can leverage app do theme do colors dot I'll pick the primary color of my.
Theme the modern text control also has a property called rap that's on by default so the text starts wrapping if there is not enough real estate but I can also turn this off and what it automatically.
Does is it will place three ellipses at the end if there is not enough real estate to show the entire text in my case I'll set the width my gallery if I edit the template.
Height I'll reduce
This next in my gallery I will insert the modern batch control I'll position it right here.Increase its width the content property I will set to this item dot my column name which is project status a choice column so dot value the batch control I'll go to style.
And theme properties there are multiple appearance options to choose from I'll pick outline the shape I'll pick Square color is brand so it will follow.
The theme set for my power app base pallet color by default it's following the color of my brand I would like to perform conditional formatting where I change.
The color depending upon the value of the status here here I have the option to change the color the base pallet color property.
Currently is set to the following color let's change this I'll use the switch function to switch on the value coming from my project status column if the value is not.
Started I will set the following color code if in progress I'll set a specific color code and if completed I'll set a different color code next in my gallery I'll use the.
Modern text control the text property I'll set to this item. budget notice it gives the data out in number.
Format here I'll add some text formatting I'll use the function text and provided the following format and now we have the budget value formatted since my currency is in.
Dollars I would like to show the dollar symbol what we can also do here is insert emojis next I'll insert the modern text control text property this item. project.
Manage which is a person column dot I'll show the display name plus I will insert from classic the image.
Control place it right next to the name of the project manager image property for the image control will be this item. project manager..
Piure next I will leverage the model progress bar control I'll position it right here this control style and theme currently the progress color is set to the brand.
Color the maximum value is set to 100 the value property is currently set to 50 if I change this you can see how the progress bar indicator changes and this value property is what.
I will set based upon the number column percent complete base pallet color property if this item. percent complete is less than 25 then I'll pick a specific color else.
I'll pick the following color so it's either red or green depending upon how much percent is complete to show the actual value I'll insert a.
Text control and the text property I will set to this item do percent complete I'll concatenate this with percentage I'll insert another text.
Control and here I would like to show the number of days that are currently left for this project to end the text property if date difference between today's date and the end date of the.
Project if this is less than zero meaning the end date has surpassed I will show an empty value else I will showcase the value of the date difference I'm recording this video as.
Of the 13th of March technology is used now this is a multi select lookup column in my my gallery go and.
Insert another Gallery I will pick a blank horizontal Gallery I will position this right here the items property for the horizontal Gallery I will set as this item dot.
Technologies used and for now I will edit this Gallery insert the modern text control and set its text property to this item do.
Value so you can see how this inner Gallery shows the values for that multi select lookup column however I would like to show images.
Here for that I would have to query my lookup list I'll go and add a connection to that list for the app object.
On start of my app I'll go and load that data in a collection the data coming from my Technologies list I'll run the onart.
Function so the collection has the information I need and in my horizontal Gallery instead of using the text control I will go and insert the image.
Control I'll position it right here image controls image property will be look up my collection where ID is equal to value of this item do ID and from there go and get the.
Photo so now we can see how it showcases the different technologies that are tagged for that specific project I'll reduce the size of the image and reduce the width of the.
Template item I'll also reduce the width of this gallery now if you want to create a face pile like experience first step is we'll decide.
