Create and manage webpages
Hello all, as I have told in my last blog about what is Microsoft PowerApps Portals, In this blog,I am going to show you an example of Create and manage webpages.
A webpage may be a document that's identified by a singular URL during a website. It is one among the core objects of the web site and builds a hierarchy of the web site through parent and child relationships to other webpages.
Create Webpage:-
1. Edit the portal to open it in Power Apps portals Studio.
2. From the command bar, select New page and either choose a page from Layouts or Fixed layouts.
3. In the properties pane on the right side of the screen, enter the following information:
o Name: Name of the page. This value is also used as the title of the page.
o Partial URL: The URL path segment used to build the portal URL of this page.
o Template: Page template used to render this page on the portal. If required, you'll choose another template from the list.
The webpages you create are added and their hierarchy is displayed within the Pages pane. To look at the Pages pane, select Pages from the toolbelt on the left side of the screen.
Let's say you've created a few webpages for your portal. The page hierarchy looks as follows:
If you're working with a portal created in an environment containing customer engagement apps (such as Dynamics 365 Sales and Dynamics 365 Customer Service), and you'd just like the menu to be the same as page hierarchy, you would like to pick Default from the Navigation Menu list.
Manage webpage:-
1. Edit the portal to open it in Power Apps portals Studio.
2. Select Pages from the toolbelt on the left side of the screen.
3. Hover over the page you want to manage and select the Ellipsis button (…) for the webpage you want to manage Alternately. you can right-click on the page you want to manage.
4. Select the required action from the context menu:
o Hide in default menu: Hide the page from being displayed in the sitemap through default menu.
o Show in default menu: Show the page in the sitemap through default menu.
o Add a child page: Add a child page to the selected page. The child page inherits the page templates of its parent page.
o Set as home page: Set the page as the home page. The URL of the new home page is about to the basis of the web site and URL of the old page is updated accordingly.
o Move up: Move the page up in hierarchy.
o Move down: Move the page down in hierarchy.
o Promote subpage: Decrease the indent and make the child page at the extent of the previous page within the hierarchy.
o Make subpage: Increase the indent and make the page a child page of the previous page in the hierarchy.
o Delete: Delete the page.
Compose a page:-
After adding the specified webpages and managing their hierarchy in the sitemap, you can add various components. The WYSIWYG editor allows you to add and edit the specified components on the canvas easily. You can add and edit the following parts on the canvas:
· Sections
o One column section
o Two columns section
o Three columns section
· Portal components
o Text
o Image
o IFrame
o Form
o List
o Breadcrumb
o Power BI
Use the WYSIWYG editor:-
1. Edit the portal to open it in Power Apps portals Studio.
2. Select the page on which you want to add the component.
3. Select an editable element on the canvas.
4. Select Components from the left side of the screen.
5. Select the component to be added.
The selected parts is added to the canvas inside the editable element.
6. To delete a component, select the component on the canvas and then select Delete on the command bar at the top of the page.
Add sections:-
Sections allow you to define a structure for your page and prepare portal components.
Once you add sections to your page, you'll add portal components inside the sections as per the requirement.
1. Edit the portal to open it in Power Apps portals Studio.
2. Select the page on which you want to add a section.
3. Select an editable element on the canvas.
4. Select Components from left side of the screen.
5. Under Section layout, select the section type to be inserted.
6. In the properties pane on the right side of the screen, enter or select the following information:
o Min Height: Enter the minimum height of the section. If you add a component that holds additional space than the specified height, the section is expanded to accommodate the part. By default, you can have a minimum height (100) px. And you can also enter height in points (PT) and percentages (%).
o Alignment: Select whether the component in the section must be left, center, or right aligned.
o Background: Select if you'd like to have color or an image as the section background.
o Fill: Choose a color for the background.
o Image: Choose an image from the list. If you would like to upload a brand new image, select Upload image.
7. Add the required portal component in the section.
Add text box:-
1. Edit the portal to open it in Power Apps portals Studio.
2. Select the page on which you want to add the component.
3. Select an editable element on the canvas.
4. Select Components from the left side of the screen.
5. Under Portal components, select Text.
6. Enter the required text in the text box.
7. To format the text, select the text to display the format options. and you modify the font size and style as needed.
8. In the properties pane on the right side of the screen, select the following information:
o Alignment: Select whether the text must be left, center, or right aligned.
o Font color: Select a color for the text.
Use code editor:-
To view the source of any component on the canvas, select the component, and then choose the source code editor icon </> in the footer.
The source code is displayed within the Code Editor pane at the bottom of the screen. The changes you created previously are updated in the source code. To make changes, update the source code and then select Save. The changes should be reflected on your canvas.
