Web part overview

How do you engage and capture your employees' attention? By simply creating content with an appealing design and that helps your users focus on important information. Focus is a web part in the form of a frame that displays information or a call-to-action button that redirects the user to the right information. It helps you to create a well-designed space for your Digital Workplace. This article describes the functionalities and use cases of the Focus web part.

User functionality

The Focus web part allows the contributor to broadcast important information to users by creating a frame with an image, text, display tags and a call-to-action button (CTA). The user can read the information on the web part and click on the CTA button to be redirected to another site. This web part is ideal for creating more stunning and engaging pages that can help to capture the user's attention.

Use cases

This web part can be used to communicate information in several situations:

Display top news related to your organization.
Create important announcements.
Event invitations to employees.
Improve the design of the work space by adding a background image and content image.
Navigate the user to the right information by creating a banner with a call-to-action button containing a link.

Adding the web part

Open the edit mode of the SharePoint page by clicking on edit at the top right of the page.
Position the mouse above or under an existing web part, and click the "+" button to open the web part catalog.
Search or scroll down in the catalog to select the Focus web part in the category "Text, media and content".
The web part is added to the desired location.

Setting up the web part

There are three categories of available settings for the Focus web part:

Layout
Content settings
Display options
Advanced settings

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".

2. Content settings

The Focus web part offers you a lot of parameters to create the design you want. You can find below the description of the different element that you can design.

2.1 Text

Add a title and description in the text boxes.
Set the color of either the Title or Description text by entering a hexadecimal format value (e.g. #FFFFFF for white).
Activate "Display the tag" and write the name of your tag in the text box.

2.2 Redirection link

The component is used to create visually impactful navigation. You can define the link and how it opens.

You have the choice to open a regular URL or a PowerApps application.
- The Focus component can open a PowerApps app if you provide it with the app's ID. You can find the ID by following the Microsoft Documentation.
Define how the link opens: in a new tab, in the same tab, in a window, or in a panel.
Define the user-selectable area.
- By default, the entire component is clickable.
- Choose to display a button so that only it is clickable. To add a button, enable "Display an action button".
Customize your button.
- Name the button in the text box.
- Set the button's alignment:
  - Alignment below or to the left of the text.
  - Then the button's position, top/bottom or left/right, and centered.
- Change the style and color of the button.

2.2 Image or color

In this section, you can define the visual content of the web part. You can add content in two different slots:

Background: the background of the web part that will be behind the text and content.
Content: the slot containing an image that will be placed next to the text.

Background:
- Add an image as a background of the web part by clicking on "Select an image". You can adjust the size and placement of the image in the drop-down menus.
- Set a color to the background by clicking on "Color" and add a hexadecimal format value for the color you want in the text box.

Content:
- Add an image in the content by clicking on "Select an image".
- You can select its ratio if you want to change the size, or keep the original one.
- In "Advanced settings", you can change the image position to the left or right side of the web part.
- In case you upload a portrait picture, you can adjust the content size by enabling "Portrait mode display".

3. Display options

3.1 Shadow

Add a shadow effect of the web part by activating "Enable shadow" and choose between Light, Normal and Strong shadow.

3.2 Radius

The "Radius" setting allows you to select the border shape of the web part. You can choose between the settings: Semi-rounded, Rounded and Pill. You can also customize it yourself by adding the amount of pixels.

3.3 Content position

Choose the placement of the card within the component to reveal the background illustration of the Focus. The card is described in Chapter 2: Content Settings.

Example of a Focus with the card in the "Fill" position.

Example of a Focus with the card in the "Left" position.

3.4 Card settings and Gaussian blur

We offer options to customize the card's background.

By default, the card's background is transparent. To make it visible, enable the "Visible Card Background" option.
Define its color and transparency.
💡 Transparency is a great way to create a modern design and soften contrasts.
Add a Gaussian blur effect, or "glassmorphism." The Gaussian blur effect combines blur with transparency for a trendy frosted glass effect!
- Different intensity levels correspond to different levels of blur.

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 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

Related to

Search

Welcome to the support center

Focus web part