I have a table in data ver called company that has information about company details that my organization does projects with I have another table called projects I store details about.
Projects my organization does for those specific companies related company this is a column of type lookup where I am relating my projects table with my company table in a many to one.
Relationship now let's go ahead and build a fully responsive canvas power app I will start with a page design and pick one of the responsive screen layouts the sidebar.
Layout this will create a power app that has the tablet form fact but will be fully responsive as it will create a screen that leverages the responsive container.
Control I'll set the title property for the header control as project tracker I can also upload a logo next in this bottom container there are.
Two containers the main container I will move it to the left in here I will go and insert the modern table control.
Experience and this I will connect to my company's table in data the moment I select this it will go ahead and connect to that table and bring in the columns from that.
Table this table sits in the main container but it is not taking the full real estate alignment and container stretch flexible height on so it takes the full real.
Estate Fields is where I can decide which fields are a part of the table control I can reorder Fields add Fields remove.
Posts Related:
- Website Showcase Mockup Bundle Download In PSD Files Sheri Sk Photoshop Tutorial
- 1200 Pro Banners Templates Free Download In PSD Files Sheri Sk PSD Banners Office
- How To Set A Fixed Position To Elements In Your Website HTML & CSS BlogSpot
Fields if I hold the ALT key while I am
In the edit experience I can also set the width of my columns here and if I was to preview this app I'm in my desktop.Experience if I was to change this let's say to a tablet experience notice how the table control adds a horizontal scroll can also change the orientation view this on a mobile device.
Experience Here If You observe the table control completely transformed into a different layout as there was not enough real estate the way the table control does.
This is it has a property called Reflow Behavior by default it's set to Reflow so depending upon the real estate it will either show the details in a grid layout or in the list.
Layout you can force a certain type of layout list only here it will show the first three field values so it's showing the ID the name.
And the industry observe if I reorder that change will be respected right here I'll set the Reflow Behavior to Reflow under style and theme we have options like header font here I can change the.
Font of the column headers I can change the size of the font I can also give it a specific color of my choice if I click on the reset the.
Property to its default value it goes back to the default for the theme and there are other style and theme properties that I will recommend for you to go and.
Explore the modern header control also has an option which allows us to sort the columns so here I can sort the columns by name A to.
Z Z to
A and I can try this for my other column types as well one of the other options in the table control is you can select multiple.Cells copy and paste this feature is thanks to the allow range selection property of the table.
Control we also have the ability to select a specific Row in the table control now I would like to give the user the option to search for data within this table.
Control for that I'll select my main container and insert the modern text input control reorder move up align it in the.
Center placeholder text you can use emojis here I'll put the search emoji and say search companies this text input control I'll rename it and I would like to use the.
Text that the user enters to perform a search action on the items property of my table control search in my table companies my text controls value.
Property I would like to use that to search in the following columns search in the ID column search in the name column founder column now as the user types in this.
Text box it will constantly keep searching the text input control has a a property called delay output set this to True from a performance standpoint it gives a better option because it will.
Wait for the user to complete typing I'll search for green green is in the name column for one of my companies.
Seven Lee I have my companies and the user has the option to select a company now when they select a company I would like to show all the related.
Projects in my right section container projects for table company do selected do name so observe as I select a specific record in the company table on the right.
Hand side the batch control shows the name of that specific company and in this sidebar container I will go and insert the modern table control again and this one I will connect it to.
My projects table in my scenario my sidebar container has limited real estate so this would be a good option for me where I can set the Reflow Behavior to list.
Only now I would like to show only the projects that are related and to do that for the items property of my projects table I will use the.
Formula table company do selected dot these two tables are related with each other my table is called Rd projects so I can simply pick that if I preview and select a specific.
Company it will try to show the related projects biotech Labs has three projects whereas for Global Logistics I do not have any related projects now if I sort or search the.
Table control refreshes here and there is no selection and when there is no selection the container on the right hand side should ideally not even be visible and we can do this by setting.
The visible property of the sidebar container as not is blank table company do selected dot I have a mandatory field name so I'll leverage that only the company's table is visible.
But the moment I select a company it will light up the sidebar container to show the related projects I'll search for Smith the search query was applied I select I.
Can see the related projects if there are any the projects table let's add searching capability here as well if I type lab it only Returns the.
Project names where the text contains lab now let's add another screen that allows the user to create or edit projects related to the selected compy company I'll go to new screen here I'll.
Pick header and foter layout I'll use the header control in the main container I will go and insert the modern form control and connect this to my projects.
Table the default mode of this form is set to new and for the user to land on this screen in my home screen in my sidebar container I will go and.
Insert a horizontal container this container I will move it up and in this container I will go and insert a couple of button controls the first buttons text I will.
Call it new and the second button's text edit now when the US user clicks on New on select of the button reset the form project form and then navigate the user to my form screen which in my case is.
Called screen 2 that form will need the detail about which company is selected so here I'll set a variable as well called where company and this would.
Be my table company do s selected so if I preview click new leads me to the project info screen where I can create a new project now in my form.
Control Fields I have my lookup column called related company now in my form screen I have my related company lookup column and this I would like to set.
Directly based upon the company that the user selected in the home screen so for the related company data card I will unlock it and the default property I will set.
