Adding and Managing Web Links in Power Pages – Comprehensive Guide
In Power Pages, Web Links are used to create and manage navigation menus, footers, and any other link-based structures within your site. These links are typically displayed in navigation bars, sidebars, or footers, allowing users to access different parts of the portal easily.
This guide provides a step-by-step, in-depth explanation of what Web Links are, how to add and manage them, and how to customize their behavior within Power Pages using the Portals Management App and Power Pages Studio.
1. What are Web Links in Power Pages?
Web Links are individual link entries that appear in navigation menus or other UI components of a Power Pages site. They are grouped into Web Link Sets, which are collections of links organized in a specific order.
Web Links are used for:
- Site navigation (main menu, footer menu)
- Sub-menus and dropdowns
- Internal navigation (Web Pages)
- External links (external websites or documents)
2. Components of Web Link Management
To fully understand Web Links, you need to know about the related components:
🔹 Web Link Set
A logical group or container for multiple Web Links (e.g., Main Navigation, Footer Links).
🔹 Web Link
An individual clickable item in a navigation area, which belongs to a Web Link Set.
Each Web Link can point to:
- A Web Page within the portal
- An External URL
- A Web File (PDFs, images, documents)
3. Where to Configure Web Links
Web Links are primarily configured using the Portals Management App, although the newer Power Pages Design Studio supports limited editing of site navigation.
4. Step-by-Step: Adding Web Links
Step 1: Open the Portals Management App
- Go to https://make.powerapps.com.
- Open the Apps section.
- Launch the Portals Management app.
Step 2: Create or Identify a Web Link Set
- In the left-hand menu, select Web Link Sets.
- Click + New if you want to create a new navigation set.
- Enter:
- Name: e.g.,
Main Navigation
- Website: Select your Power Pages site.
- Navigation Type: Optional, used for logic.
- Name: e.g.,
Step 3: Add Web Links to the Set
- Go to the Web Links section.
- Click + New to add a link.
- Fill in the following fields:
Field | Description |
---|---|
Name | Display name for the link (e.g., “Home”) |
Web Link Set | Select the parent navigation set |
Page | Choose a Web Page if linking internally |
URL | Use for external links (e.g., https://microsoft.com ) |
Parent Web Link | (Optional) Used for submenus/dropdowns |
Display Order | Controls order of appearance |
Publishing State | Set to Published |
- Save and close.
5. Types of Web Links
Type | Example | Configuration |
---|---|---|
Internal | Home, About, Contact | Set Page to target Web Page |
External | Microsoft, LinkedIn | Set URL to full external link |
File Download | Brochure, PDF | Link to a Web File |
Submenu | Services > Web Development | Set Parent Web Link for nesting |
6. Customizing Web Link Display
Using Web Templates or HTML:
You can render Web Links dynamically using Liquid inside a Web Template:
{% assign mainLinks = weblinks["Main Navigation"] %}
<ul>
{% for link in mainLinks %}
<li><a href="{{ link.url }}">{{ link.name }}</a></li>
{% endfor %}
</ul>
This will output your link set dynamically based on what’s in Dataverse.
7. Example Use Case
Let’s say you want to create the following site menu:
Home | Services ▼ | About | Contact
└── Web Development
└── App Design
Here’s how it would be structured:
- Web Link Set: “Main Navigation”
- Web Links:
- Home (Page: Home)
- Services (Parent)
- Web Development (Parent Web Link: Services)
- App Design (Parent Web Link: Services)
- About (Page: About)
- Contact (Page: Contact)
Use Display Order
values like 1, 2, 3, etc., to arrange the items.
8. Best Practices
Practice | Recommendation |
---|---|
Naming | Use meaningful names like “Main Navigation”, “Footer Links” |
Order | Use Display Order to maintain logical flow |
Consistency | Avoid mixing internal pages and external links within a submenu |
Use Publishing States | Draft vs. Published for staging menus |
Nesting | Use Parent Web Link only where submenu is needed |
Dynamic Rendering | Use Liquid in templates to render menus based on user roles or conditions |
9. Securing and Personalizing Web Links
You can use Liquid to show or hide links based on user authentication:
{% if user %}
<a href="/profile">My Profile</a>
{% endif %}
Or based on roles:
{% if user.roles contains 'Administrator' %}
<a href="/admin">Admin Dashboard</a>
{% endif %}
10. Troubleshooting Web Links
Issue | Cause | Fix |
---|---|---|
Link not showing | Not published or incorrect Web Link Set | Check publishing status and linkage |
Wrong order | Missing or incorrect display order | Adjust Display Order field |
Submenu not working | Parent-child relation missing | Verify Parent Web Link set correctly |
External link broken | URL not starting with http | Always use https:// or http:// |