Quick Overview of Power App Pages — Design Studio
In this blog, we will investigate the Design Studio of Power App Pages. This is the continuation of my previous blog on Power App Pages where I can provide the steps and overview initial setup of Power App Pages. Do refer to the previous blog to complete the step of your first Power App Page website as it prerequisite for this blog
Overview of Design Studio:
After your site is created, you can navigate to Design Studio by clicking on the Edit button present on the Home page.
When you open the Design Studio, you will different areas present on the left navigation for Developers and Admins.
Page Area: This area will show you all the available pages and sub-pages in the left navigation bar. You can create the pages directly from the left navigation and set up the child-parent hierarchy based on your business requirement.
Styling Area: After Page, you will require a style that will have a preset theme available for your website. You can edit the existing template the pre-decide the color of the Heading, Sub-Heading, paragraph, background color or page, and other visual components of the website this section makes it easy to change the theme of the hosted website using a single click.
Data Area: You will be able to see the whole tables that are available in your connected environment. As I have connected with the existing Dynamics 365 CRM so you can see all the tables that are available to use for this site. You can see there are two sections:
- “Table in this site” section — This section will show all the tables that are present on site as in they can be accessed and are used by your site. You can add the new table or add the existing table from the Table permission settings from the Setup section. After setting up permission once you add your table view or form anywhere on the site then your table will be moved under this section. For example, the Feedback table is being used in Contact us by default due to which Feedback form is present under the “Table in this site” section.
- Other tables section: This section will show all the tables which are present in your environment but are not being used by your site.
Set up Area: Here you will see the Minimal setup that can be controlled from Design Studio. First, we have Identity Providers for your Power App Pages. This is the same page from the Power App portal as you might create a customer portal for your customer management where you might provide the registration function for your customers. In Power App Portal, your audience can be authenticated using the below methods:
Local Sign In — This method allows the portal to register the person and sign into your portal. Portal handles the Registers, log-in, and Password management process.
Azure Active Directory or Azure Active Directory B2C — This method allows users to perform SSO (Single Sign On) for authenticating the portal and logging into the portal. Now, the user can present in your tenant as an internal or guest user or you can set up the B2C where a user from another AD can authenticate.
Social Platform — Portal also allows users to authenticate from their Facebook, LinkedIn, Microsoft, Google, and Twitter accounts but developers need to first enable them and set up the configuration from a portal management application.
After Identity providers we have Table Permission and as I have previously mentioned that you can connect the Dynamics 365 table to your Power App Page site so that you can data verse table as a backend for your business website.
Here we are going to add the Account table in read-only mode so that we utilize my account table in read-only mode on my Power App pages website. To do so Click on + New Permission.
You can need to enter the preferred name of the table as your table name on the Power App Page site can be named differently compared to your Dynamics for example Accounts table in your Dynamics 365 CRM can be named as Clients on Power App Pages. You also need to set the table and set of permission that you need to allow for that table as mentioned below screenshot.
Let’s make some edits:
Now I will make some edits to the existing home page that comes out of the box with the default template. Here I am doing to delete the available section by clicking on the section and navigating to deleted as mentioned below screenshot.
After removing some sections, I am changing the logo of the site. You need to click on the logo image and click on the Image button.
After clicking on the button, you can add an image from an existing uploaded image or you can upload a new image. Here I am going to upload my logo.
After uploading the logo, it will be available in the image area for selection. Select your preferred image and click on OK and your site logo will be changed.
Now, I am adding a new section on the site for my profile photo and Bio in the hero section of website. You can add different kinds of sections as there are different layouts present as mentioned in the below screenshot. I am going for 1 column and clicking on the same.
I will select the image to upload my profile photo on the website and it will be placed in the center of the hero section. You can adjust the alignment and size of all components that you can in any section.
Here I am resizing my profile and adding some text components as there to support my visual component.
Below my first section, I have added a blank section with a background image cloud to add some visual elements to my website.
Now I am going to add my experience and I am selecting 3 columns sections so that they will be separated from each other and visually give more space so that users can see it and understand it properly.
Here first I have added Images and two text components defining the information that I wanted to provide to my audience. In this way, a business can add their services and other components which are little effort taken when we are designing in HTML.
Illustrations are taken from Undraw — One of the best websites you can get free illustrations created by Katerina Limpitsouni and export them in different image formats and colors of your preference. Not Sponsored just an appreciation for Artist 🤣
Here I am adding the action button so that user can click on it and redirects to my Medium blog or Instagram page. Similar to the previous action you need to select the button component and you need to add the label and URL of the website or page on which you wanted the user to redirect.
Once you are all the changes have been completed click on the Sync button on the top right side to manually sync to the Live website.
Hope this helps you to understand the Power App Pages.