DEV Community

Cover image for Exploring Link Modern Controls in PowerApps: Use Cases and Examples
Seena Khan
Seena Khan

Posted on

Exploring Link Modern Controls in PowerApps: Use Cases and Examples

PowerApps has revolutionized the way we create business applications, offering a wide range of controls to enhance user experience. One such control is the Link Modern control, which allows users to navigate to external URLs seamlessly. In this article, we'll explore various use cases and examples of Link Modern controls in PowerApps.

What is a Link Modern Control?

The Link Modern control in PowerApps is a clickable element that redirects users to a specified web page. It is designed to be accessible and compliant with modern web standards, ensuring a smooth user experience. Key properties of the Link Modern control include:

  • Text: The text displayed on the app with the link enabled.

  • URL: The web address users will navigate to when they click the link.

  • AccessibleLabel: A label for screen readers to ensure accessibility.

  • Visible: Determines whether the control is visible or hidden.

  • DisplayMode: Specifies whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

Use Cases for Link Modern Controls

  • Navigating to External Resources

One of the most common use cases for Link Modern controls is to provide users with quick access to external resources. For example, in a training app, you can use Link Modern controls to direct users to online tutorials, documentation, or support pages.

Example:

Text: "Learn More"
URL: "https://learn.microsoft.com/en-us/power-apps/"

  • Linking to Related Applications

In business applications, it's often necessary to link to related applications or services.

Link Modern controls can be used to create seamless navigation between different apps, enhancing the overall user experience.

Example:

Text: "Open CRM"
URL: "https://crm.yourcompany.com"

  • Providing Additional Information

Link Modern controls can be used to provide additional information or context about a particular feature or field within the app. This is especially useful for complex forms or data entry screens where users may need more information to complete their tasks.

Example:

Text: "Help"
URL: "https://help.yourcompany.com/form-guidelines"

How to Add Link Modern Controls in PowerApps

To add a Link Modern control in PowerApps, follow these steps:

  • Login into your PowerPlatform environment, then select Apps and select Start with a Page design.

Image description

  • On the Create an app page select Blank Canvas.

Image description

  • Select Settings from the Power apps studio.

Image description

  • Select Updates then enable Modern controls and themes by selecting On on toggle control, then close the settings screen.

Image description

  • Add the Control: In the PowerApps studio, select the Insert tab, choose Display and then select Link.

Image description

  • Configure Properties: Set the properties such as Text, URL, AccessibleLabel, and DisplayMode to customize the control according to your needs.

Image description

Link Modern controls and traditional link controls in PowerApps have several key differences. Here's a comparison to help you understand their distinctions and benefits:

Link Modern Controls

  • Accessibility

Improved Compliance: Designed to adhere to modern web accessibility standards, making them more inclusive for all users.

AccessibleLabel: Allows you to set labels for screen readers, enhancing the user experience for those with visual impairments.

  • Usability

Enhanced Design: Provides a cleaner, more intuitive interface that aligns with modern UI/UX best practices.

Responsive Behavior: Better suited for responsive design, ensuring a consistent experience across different devices and screen sizes.

  • Configuration Options

Rich Properties: Includes advanced properties like AccessibleLabel, DisplayMode, and Visible, giving developers more control over the control's behavior and appearance.

Consistency: Consistent with other modern controls in PowerApps, providing a uniform look and feel.

Traditional Link Controls

  • Accessibility

Basic Compliance: May not fully adhere to the latest accessibility standards, potentially limiting usability for some users.

Limited Accessibility Features: Fewer built-in features to support screen readers and other accessibility tools.

  • Usability

Basic Design: Offers a more traditional, less polished interface that may not align with current UI/UX trends.

Fixed Behavior: Less adaptable to responsive design, which may lead to inconsistencies across different devices.

  • Configuration Options

Limited Properties: Fewer properties for customization, limiting the control's flexibility and functionality.

Legacy Feel: May feel outdated when compared to modern controls, potentially affecting the overall user experience.

Use Case Scenarios

Link Modern Controls:

Ideal for applications that require high accessibility standards and modern design aesthetics.

Suitable for responsive, mobile-first applications that need to function seamlessly across various devices.

Traditional Link Controls:

Useful for legacy applications where modernization is not a priority.

Appropriate for simple applications with minimal design and accessibility requirements.

Conclusion

While traditional link controls are still functional and useful in certain contexts, Link Modern controls offer significant improvements in accessibility, usability, and configuration options. By adopting Link Modern controls, developers can create more inclusive, user-friendly applications that align with modern web standards.

Top comments (0)