The Project weather component shares the status of a project on your SharePoint pages, as a list of indicators. Each indicator shows a weather icon that tells its status, a title and, if you enter one, a short description.

This article describes the web part's use cases, how to get started, its settings, managing the indicators on the page and the best practices to follow.

📋 Contents

1. About the component
2. Add the component to your page
3. Configure the component
4. Manage the indicators on the page
5. Best practices
6. What changes from the previous version

1. About the component

Project weather is made of an optional title and a list of indicators. Each indicator carries one of four statuses, shown by a weather icon:

💡 Your visitors hover over an indicator's icon to read its status label.

Use cases

• Share a project's progress with the whole team.
• Track the main areas of a project: budget, schedule, resources, risks.
• Build a project page or a steering committee page.

2. Add the component to your page

1. Open the SharePoint page in edit mode by clicking Edit at the top right.
2. Where you want the component, click the "+" button to open the web part catalog.
3. Search or scroll the catalog to select Jint - Project weather, in the "Text, media, and content" category.
4. The component is added where you want it, with its default values.

A newly inserted Project weather carries the title "Project weather" and has no indicators. In edit mode, it shows "No indicators yet" and an Add button. As long as it has no indicators, your visitors don't see the component.

3. Configure the component

The configuration panel has three tabs: Design, Content and Visibility. Each setting applies to the page immediately.

3.1 Design tab

Background

In the Background section, choose the component's background color. By default, the background is White.

The color picker has two tabs: Palette, with the Theme colors (including SharePoint primary) and the Grays, and Custom, to enter a color code or pick a color with the Eyedropper.

💡 The indicators' text and icons turn black or white depending on the background color, to stay readable.

Appearance

The Appearance section sets the component's border, shadow and corner radius.

By default, the component follows your site's Jint theme: the section shows "Appearance values come from the theme. The theme is set in Jint Portal." and its settings are disabled. Click Customize to change them. To go back to the theme, click Reset from theme.

3.2 Content tab

Title

The title is entered and formatted directly on the page (see part 4). Turn Show title off to show the indicators only.

Indicators

The max length applies to each indicator's title and short description. The field only accepts digits; the number you enter applies when you leave the field.

💡 Lowering the max length doesn't cut indicators already saved: they still show in full. However, to edit an indicator whose text exceeds the new length, you first need to shorten it.

3.3 Visibility tab

Audience

Turn on Custom audience to restrict the component to people or to members of Microsoft 365 groups. Only the chosen visitors, or members of at least one chosen group, see it. For everyone else, it takes up no space on the page.

Display

Turn on Schedule visibility to limit the display in time, with a Display start, a Display end, or both. Each date appears when you turn its switch on: the start is set to the present moment, the end to 7 days later.

⚠ If you turn on Custom audience without choosing anyone, no one sees the component anymore. The section warns you: "No one can see this web part: choose at least one person or group."

⚠ If the display end comes before the start, the panel shows "The end date must be later than the start date." and the schedule doesn't limit the display until you fix it.

💡 In edit mode, you always see the component, whatever its audience or schedule. A badge tells you so: "Audience", or the display dates.

4. Manage the indicators on the page

Indicators are added, edited and reordered directly on the page, not in the configuration panel. In edit mode, each indicator shows a drag handle, and an Add button appears below the list.

Add an indicator

1. In edit mode, click Add, below the list or in the empty state.
2. A form opens in place of the button. Enter the indicator's Title.
3. Choose its Status from the four weather buttons. Hover over a button to read its label: Satisfactory, Needs attention, At risk or Critical.
4. Enter a Short description if you wish.
5. Click Add to save the indicator, or Cancel to close the form.

The new indicator goes last in the list.

The Title and Status are required. If one is missing when you click Add or Edit, the form shows "This field is required" below the field concerned and doesn't save the indicator. The message disappears as soon as you enter a title or choose a status.

If the title or the short description exceeds the Text fields max length, the form shows a message below the field such as "The text cannot exceed 100 characters; it currently contains 112.", with the max length and the number of characters entered. The indicator isn't saved as long as the text is too long.

Edit or delete an indicator

1. In edit mode, click the indicator. It's highlighted and the form opens right below it, with its title, status and short description.
2. Make your changes, then click Edit to save them. Cancel closes the form without changing anything, and Delete removes the indicator.

Until you click Edit, the indicator keeps its saved values. Clicking the indicator again closes the form without saving.

⚠ Delete removes the indicator immediately, without asking for confirmation.

⚠ Only one form opens at a time. If you click another indicator or leave edit mode while a form is open, it closes and what you entered is lost.

Reorder the indicators

Indicators show in the order you give them. To move an indicator, drag it by its handle (tooltip "Move" followed by the indicator's title) and drop it in its new place.

While a form is open, the handles and the Add button are hidden.

The component's title

Click the title: it becomes editable and a toolbar shows above it. It sets the Text style (H1 to H4 or Body), the Font, the Font size, the Text color, bold, italic, underline and alignment. The Reset formatting button restores the original style. Click outside the title to confirm.

By default, the title is H4, black, 20 px and bold.

💡 As long as the component follows the Jint theme, the title's toolbar shows the theme banner instead. Click Customize to format the title.

5. Best practices

Short, explicit indicators

Give each indicator a short title ("Budget", "Schedule") and use the short description to explain its status in one sentence.

Keep the weather up to date

Update the statuses at each progress review or steering committee. For a weather tied to a project phase, schedule its display end in the Visibility tab.

Keep a readable order

Sort the indicators from most to least critical, or keep the same order from one project to the next so your readers find their way.

💡 The indicators' title and short description are found by SharePoint search.

6. What changes from the previous version

If you used the previous version of the component (see the article Project weather component):

• Indicators are added, edited and deleted in a form built into the page, which checks required fields and text length. They're reordered by drag and drop.
• The statuses don't change: Satisfactory, Needs attention, At risk and Critical, with the label when you hover over the icon.
• The character max length setting becomes Text fields max length, from 50 to 200 characters (100 by default), for the title and the short description.
• The border setting becomes the Appearance section: border, shadow and corner radius.
• New Background section, to choose the component's background color.
• The panel is organized in three tabs, Design, Content and Visibility. The Visibility tab lets you restrict the component to an audience and schedule its display.
• As long as it has no indicators, the component stays invisible to your visitors.
• The indicators' title and short description are found by SharePoint search.