Adding and managing Web Links

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.

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://`