The Newcomers web part shows your organization's newcomers on your SharePoint pages: those who just arrived and those arriving soon, based on their arrival date in Microsoft 365. Your visitors see one card per person, with the arrival date in relative time, and can welcome them in Teams in one click if you show the welcome button.

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

📋 Contents

1. About the web part
2. Before you start: arrival dates in Microsoft 365
3. Add the web part to your page
4. Configure the web part
5. Enter and format content on the page
6. Best practices
7. What changes from the previous version

1. About the web part

The Newcomers web part is made of an optional title and a grid of cards: one card per newcomer.

Each card shows:

• the person's profile photo, or their initials on a color specific to their name if they have no photo;
• their name;
• the profile fields you choose, one line per field (by default, their job title and arrival date);
• the welcome button, if you turn it on.

The arrival date shows in a badge, in relative time from today: in days under 7 days, in weeks under 30 days, in months under a year, in years beyond. When you hover over the badge, a tooltip gives the exact date.

Clicking a card opens the person's Microsoft 365 profile card.

Cards show in this order: first past arrivals, from the most recent to the oldest, then upcoming arrivals, from the nearest to the furthest. A person never appears twice.

If there's no one to show, the web part shows "No newcomers to show".

Use cases

• Welcome the people who arrived this week, on the intranet home page.
• Announce the arrivals of the coming weeks, to prepare their onboarding.
• Introduce the newcomers of a team, a site or a subsidiary, by limiting the web part to Microsoft 365 groups.
• Invite your colleagues to write a welcome message in Teams, in one click on the card.

2. Before you start: arrival dates in Microsoft 365

The web part reads each person's arrival date from their profile in your organization's Microsoft 365 directory. It doesn't enter it itself: the directory provides it.

• A person without an arrival date in the directory never appears in the web part.
• To read these dates, the web part needs a permission that an administrator of your Microsoft 365 tenant must have approved.

⚠ If none of the people the web part can show has an arrival date, the configuration panel shows "No arrival dates are available for these collaborators: check that they are filled in the directory, and that a tenant administrator has approved the permission to read them." Contact your organization's Microsoft 365 administrator.

⚠ If the web part isn't allowed to read the directory, the panel shows "Directory permission missing: a tenant administrator must approve it." and the page shows "The content can't be shown right now." instead of the cards.

💡 The web part shows the directory as it was at most 5 minutes ago: a date that was just filled in can take a few minutes to appear.

3. Add the web part to your page

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

A newly inserted Newcomers web part carries the title "Latest newcomers" and shows all collaborators who arrived in the past week or arrive in the coming week, with their job title and arrival date.

4. Configure the web part

The configuration panel has three tabs: Design, Content and Visibility. Each setting applies to the page immediately, except numbers typed in a field, which apply when you leave the field.

4.1 Design tab

Layout

The section sets the Grid, then the Profile card.

Setting	Values	Default
Profiles per row	Auto, Single	Auto
Spacing	Compact, Airy	Compact
Format	Portrait, Landscape	Portrait
Show photo	on or off	On
Size	Small, Large	Small

• Profiles per row: with Auto, the grid shows as many cards per row as the section's width holds, six at most. With Single, each card takes a whole row.
• Spacing: Airy widens the gap between cards and the margins of each card.
• Show photo: off, no card shows a photo. Size appears when the photo is shown; Large enlarges the photo.

⚠ If you choose Single while the format is Portrait, the format automatically switches to Landscape.

Web part height

Setting	Values	Default
Height (px)	with the slider or by typing, in steps of 10, up to 800 px	250 px

The height sets the number of whole rows of cards shown. The cards that don't fit move to the following pages: your visitors browse them with the chevrons on each side or the dots in the center, or by swiping on mobile. If all cards fit on one page, the pagination doesn't show.

⚠ The height never goes below 150 px, nor below the height of a whole row of cards. If you make the cards bigger (format, photo, displayed fields), the height goes back up to this minimum by itself.

Background

Setting	Values	Default
Background	Color, Image	Color
Background color	a palette color or a custom code	White
Choose an image	a SharePoint image	a default image
Mark as decorative	on or off	On
Alternative text	a text	empty
Focal point	a point of the image	the center

• Color: the background takes the chosen color. Texts without a color of their own placed on this background, such as the title, automatically switch to black or white, whichever contrasts best.
• Image: the background shows the chosen image, cropped around its Focal point. Alternative text appears when the image isn't marked as decorative.

Appearance

The Appearance section sets the border, shadow and corner radius of the web part and of its cards, as well as the background and text color of the cards.

By default, the web part 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.

Then choose the scope of your settings: Web part for the web part as a whole, Cards for the cards. The section opens on Web part. Each scope has its own border, shadow and corner radius.

Setting	Values	Default
Border	on or off, then Subtle, Medium, Marked or a custom width from 1 to 10 px, and a Border color	Off
Shadow	on or off, then Light, Medium or Strong	On, Medium
Corner radius	on or off, then Soft, Medium, Marked or a Custom radius from 0 to 50 px	On, Medium

With the Cards scope, two settings are added:

Setting	Values	Default
Background	a palette color	White
Text color	a palette color	Black

4.2 Content tab

Accessibility

The Accessibility section has no setting. As soon as the panel opens, it measures the contrast of the card text, named Card, on the card background. It shows the Ratio and the Overall readability: Excellent, Good or Insufficient.

If readability is Insufficient, click Fix: each color that is too weak is replaced with the nearest palette color that gives enough contrast.

As long as no card is shown, the section shows "No card to check for now."

Title

Setting	Values	Default
Show title	on or off	On

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

Newcomers

The Newcomers section chooses the people shown based on their arrival date: a window of recent arrivals and a window of upcoming arrivals, around today.

Setting	Values	Default
Recent arrivals	on or off, then 1 week, 1 month, 3 months, 6 months or Custom	On, 1 week
Upcoming arrivals	on or off, then 1 week, 1 month, 3 months, 6 months or Custom	On, 1 week
Number of days	from 1 to 365	7

• Each window is counted from today, today included. 1 month, 3 months and 6 months are calendar months.
• Number of days appears under a window when you choose Custom.
• "Today" is each visitor's day, in their time zone, when the page loads.

⚠ If you turn off both windows, the web part shows all collaborators who have an arrival date. The section reminds you: "No active window: all collaborators are shown."

Welcome button

Setting	Values	Default
Welcome button on the card	on or off	Off

When on, the button appears on each card. The section reminds you: "Click the button on a card to change its text and style. For visitors, the button opens a Teams chat with the card's collaborator."

• The button's text and style are set on the page (see part 5).
• When they click the button, your visitors open a Teams chat with the person, in a new tab. Clicking the button doesn't open the profile card.
• A person without an email address has no button.

Source (groups and people)

Setting	Values	Default
All collaborators	on or off	On
Groups and people shown	people and Microsoft 365 groups	none
Include external accounts	on or off	On

• All collaborators: the web part draws from your organization's whole Microsoft 365 directory.
• Turn it off to choose people and groups in Groups and people shown: search for them by name in "Search for a person or group". The web part then shows the chosen people and the members of the chosen groups, subgroups included.
• Include external accounts: off, the web part leaves out guests and accounts from other organizations, even when chosen by name.
• A disabled account is never shown.

⚠ If you turn off All collaborators without choosing anyone, no one is shown anymore. The section warns you: "No group or person chosen: nobody is shown."

💡 If a chosen group can't be read, the web part still shows the other chosen people and groups.

Displayed fields

Setting	Values	Default
Displayed fields (drag to reorder)	an ordered list of profile fields	Job title, Arrival date

Click Add a field to add a field at the end of the list, among: Job title, Department, Location, Arrival date, Company name, Employee ID, Employee type, Manager, Street address, City, State, Postal code, Country or region, Business phone, Email and Fax number. Drag a field to change its order, click its cross to remove it.

• Each card shows one line per field, under the name, in the list's order.
• If a person has no value for a field, their card doesn't show that line.
• Arrival date shows in the relative-time badge.

4.3 Visibility tab

Audience

Turn on Custom audience to restrict the web part 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.

Turn on Hide when there's nothing to show so that the web part disappears for your visitors when it has no newcomer to show, instead of showing "No newcomers to show". It then takes up no space on the page.

Setting	Values	Default
Custom audience	on or off, then people and groups	Off
Schedule visibility	on or off	Off
Display start	on or off, then a date and a time	Off
Display end	on or off, then a date and a time	Off
Hide when there's nothing to show	on or off	Off

⚠ If you turn on Custom audience without choosing anyone, no one sees the web part 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 web part, whatever its audience or schedule. A badge tells you so: "Audience", the display dates, or "Hidden when empty".

5. Enter and format content on the page

The 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 "Latest newcomers", H4, black, 20 px and bold. If you clear the title, your visitors don't see it.

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

The welcome button

When Welcome button on the card is on, click the button on a card to enter its text. A toolbar shows to format it.

⚠ As long as you haven't entered any text, the button shows "Welcome 👋" as placeholder text, for you only: your visitors don't see the button. Enter a text to show it to them, or choose Icon only.

The text and style apply to the button of all cards. Each change applies to the button's whole text, whatever your selection.

The button's toolbar sets the Font, the Text color, the Font size, bold, italic, underline and alignment, as well as:

Setting	Values	Default
Button style	Filled, Outline, Text	Filled
Icon	No icon, Icon left, Icon right, Icon only	No icon
Choose icon	Arrow, Chevron, Add, Open, Document, Email, Calendar, Announcement, Team, Play	Arrow
Fill color	a palette color	your SharePoint site's main color
Corner radius	from 0 to 50 px	6 px

• By default, the button's text is white, 16 px.
• Choose icon appears with Icon left, Icon right or Icon only.
• Fill color colors the background of a Filled button and the outline of an Outline button. A Text button has neither background nor outline.
• Icon only: the button shows its icon's name on hover. If you go back to another choice, the button's text comes back as it was.

⚠ In edit mode, clicking the button doesn't open any Teams chat, and clicking a card doesn't open any profile card. Test them on the published page.

6. Best practices

Have arrival dates filled in at the source

The web part only shows people who have an arrival date in the Microsoft 365 directory. Check with your Microsoft 365 administrator that the dates are filled in for each arrival (see part 2).

Match the period to the pace of arrivals

On a home page, a 1 week window keeps the web part up to date. On a team page where arrivals are rare, choose 1 month or 3 months to avoid an empty web part.

Enter the welcome button's text

If you turn on the welcome button, enter its text on a card: as long as it's empty, your visitors don't see the button.

Keep cards short

Two or three fields are enough, for example Job title, Department and Arrival date. Taller cards show fewer rows for the same height.

Check the contrast of the cards

If you customize the background or text color of the cards, check the Accessibility section and aim for at least Good.

7. What changes from the previous version

If you used the previous version of the web part (see the article Newcomers component):

• The web part is now called Jint - Newcomers in the catalog, in the "News, people, and events" category.
• Two independent windows replace the duration range: Recent arrivals and Upcoming arrivals, each from 1 week to 6 months, or from 1 to 365 days.
• The source is set to All collaborators or to chosen people and groups, subgroups included.
• ⚠ External accounts are now included by default. Turn off Include external accounts to leave them out.
• You choose the fields shown on each card, and their order, among 16 profile fields.
• The arrival date shows in relative time, with the exact date on hover.
• The Teams button becomes an optional welcome button, off by default, whose text, style and icon you set.
• Clicking a card opens the person's Microsoft 365 profile card.
• The height is set with a slider and sets the number of rows of cards shown, with pagination. The card is set separately: profiles per row, spacing, format and photo.
• New: a Background in color or image, and an Appearance linked to the Jint theme, for the web part and for its cards.
• New: the Accessibility section checks the contrast of the cards and fixes it in one click.
• The web part can show a title, formatted on the page.
• The panel is organized in three tabs, Design, Content and Visibility. The Visibility tab lets you restrict the web part to an audience, schedule its display and hide it when it has nothing to show.
• The panel warns you when the permission to read the directory is missing, or when no arrival date is available.