Webpart overview

This article describes the Action Button Beta web part, which allows you to create a customized button that can redirect your user to any necessary destination. The Action Button can add interactive content to your site and enhance its functionality.

User functionality

With the Action Button, users can navigate within their digital workplace or to the suitable tool, like Power Apps. The action can be opened in the same tab, another tab, or as a panel or window within the page's context.

Use cases

You can use the Action Button to:

• Navigate within your SharePoint Digital Workplace.
• Redirect to an external application like your HR application.
• Open an in-house Power Apps to log an IT support demand. 
• Open a form or a survey powered by Microsoft Form. 
• Open a booking page to make an appointment with a specific department. 
• Contact the IT Services. 

Add the web part 

1. Open the edit mode of the SharePoint page by clicking on edit at the top right of the page,
2. Position the mouse over or under an existing web part, and click the "+" button to open the web part catalog. 
3. Search or scroll down in the catalog to select the Action button web part in the category "Text, media and content". 

4. The web part is added to the desired location. 

Setting up the web part

There are two categories of settings available for the Action Button web part:

1. Content settings

• Button title: Add a label to the button by writing a title. 
• Button action: Choose the action to either open a link or a Power Apps application. 
  You can find your Power Apps ID in the following Microsoft Documentation.
  • Direct link: Choose how the user should open the link from the following options: 
    • in a new tab
    • in the same tab
    • in a pop-up
    • in a panel

Below are two examples of the different ways the Action Button can open a link: 

Website opened in a pop-up 

Website opened in a panel
Note: you can choose the panel size between 25%, 35% and 50% of the screen.

2. Display

• Button size: change the dimensions of the button between small, medium or large. 
• Button position: choose the button's position between left, centered or right.
  • Customize: you can choose to display the button horizontally or vertically. 
• Color or image: you can customize the button color of your choice and decide how it should be colored.  
  • Button style: choose the color style of the button between fully colored, colored outline or no outline. 

Button style: Full

Button style: Outline 

Button style: No outline

• Shadow: enable the strength of the button's shadow to make it stand out more. 

Button with Strong shadow effect

• Radius: you can choose the outline shape of the button between slightly rounded, semi-rounded and fully rounded edges. You can also customize the rounded edges by adding the pixels under Customize. 

Button with fully rounded outline shape

3. Advanced settings

3.1 Audiences

Define the audience for your component to make it visible to a specific population!

• Select one or more Entra ID groups as the component's audience.
• Only people belonging to one of the groups will be able to see the components.
• The component will not appear for other users.

Example of layout