Webpart overview

With image button Webpart, you can easily define a clickable picture with a link to a communication, a document or a specific space in your Digital Workplace

User functionality

User can open the link related to your communication in different ways :

• in the current tab
• in a new tab
• in a side panel
• in an i-frame

Use cases

You can create a visual communication and redirect to :

• A SharePoint space

• An article

• A document

• A survey or a form

• An application

Add the webpart

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 WebPart, and click the "+" button to open the web part catalog. 
3. Search or scroll down in the catalog to select the image button WebPart in the category "Text Media and content". 
4. The web part is added to the desired location.  

Setting up the webpart

There are 3 categories of settings available for the image button web part:

• Layout
• Content Setting
• Display

The generic customization options are not covered in this article. You can find details and tips on these options in the Design Customization of web parts article.

1. Layout

• Choose the size of the web part by clicking on: Small, Medium or Large. It corresponds to standard Jint's web part Size you can use to align web part in your pages.
• Personalize the size of the web part by adding the amount of pixels under "Customize". 
• Adapt automatically the height web part to the image by activating "Fit web part to image". 

2.Content Setting

• Picture 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.

3. Display

Select an image

1. Add an image by clicking on "Select an image". 
2. Select an image from three different options: 
   • Recent: choose an image that was recently used. 
   • Stock Images: search for a stock image by adding a key term in the search bar, or choose a stock image from the recommended categories.  
   • Upload:  import an image from your device by clicking on "Choose file". 

Once the image is selected, you can insert the image by clicking "Insert". If you wish to abandon the selection of images, click on "Cancel".

If you wish to change the image click on "Edit image" or delete the image by clicking on the trashcan icon. 

4. Advanced settings

4.1 Audiences

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

• Select one or more Entra IDgroups 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