Deuxième partie – Comment créer un intranet SharePoint Online

Deuxième partie – Comment créer un intranet SharePoint Online

Dans la première partie, nous avons montré comment créer un site de communication pour servir de page de renvoi à l’intranet. Nous vous avons expliqué le processus de création d’un site SharePoint Online. Puis nous avons ajouté un logo d’entreprise et modifié le nom du site. 

Après avoir fait tout cela, le site commence à être un peu plus personnel pour notre marque. Cependant, la barre supérieure et les couleurs d’accentuation de notre page sont encore un peu génériques. Ce serait bien si nous pouvions les changer pour les couleurs de la marque de notre entreprise. Pour ce faire, nous pouvons utiliser le générateur de thèmes, avec un peu d’aide du Management Shell de SharePoint Online.

Créer un thème de couleurs personnalisé à l’aide de Microsoft Theme Generator

SharePoint Online dispose d’un certain nombre de thèmes intégrés pour personnaliser l’aspect et la convivialité de vos pages. Cependant, il existe un nombre limité de thèmes qui se composent principalement de couleurs primaires. Et la probabilité que l’un d’entre eux corresponde exactement à l’image de marque de votre organisation est extrêmement faible. C’est là que le Microsoft Theme Generator peut vous aider. Il s’agit d’un outil qui vous permet de créer un thème personnalisé et de le télécharger sur SharePoint Online.

L’outil Microsoft Theme Generator se trouve à l’adresse https://developer.microsoft.com/en-us/fluentui#/. Au préalable, vous devez connaître les codes hexadécimaux des couleurs primaires et des couleurs d’accentuation. Il existe sur Internet un certain nombre d’outils de sélection de couleurs à code hexadécimal. Cela vous permettra d’obtenir rapidement vos codes si vous ne les connaissez pas déjà.

Dans l’exemple ci-dessous, je vais seulement télécharger une couleur de thème primaire.  Dans ce cas, il s’agit de #f26f56 qui est l’orange de Practical 365.

Une fois mes codes hexadécimaux saisis, il met à jour la sortie au format JSON, SASS et PowerShell.

Dans ce cas, je vais utiliser PowerShell et copier le contenu de la boîte PowerShell. Puis je vais le coller dans un fichier TXT pour l’utiliser dans les prochaines étapes.

Remarque : si vous souhaitez explorer les autres méthodes présentées dans les sélections de sortie de l’image ci-dessus, veuillez vous reporter à la documentation de Microsoft.

Shell de gestion de SharePoint Online

Pour télécharger notre nouveau thème à l’aide du shell de gestion SharePoint Online, nous devons effectuer les étapes suivantes.

1. Si vous n’avez pas encore accès à SharePoint Online Management Shell, vous pouvez le télécharger directement depuis Microsoft ici.

2. Une fois téléchargé et installé, vous pouvez vous connecter au service SharePoint Online en exécutant la commande suivante.

Connect-SPOService -Url <a href="https://yourtenantname-admin.sharepoint.com" target="_blank" rel="noreferrer noopener">https://yourtenantname-admin.sharepoint.com</a> -credential <a href="mailto:username@domain.com">username@domain.com</a>

Cette commande s’exécutera dans le Management Shell de SharePoint Online comme indiqué ci-dessous.

3. Maintenant que nous sommes connectés au service, nous devons entrer le code PowerShell copié à partir du générateur de thèmes. Nous devons simplement ajouter une variable au début du code de $themepalette = comme indiqué au début de l’exemple de code complet ci-dessous.

$themepalette = @{
"themePrimary" = "#f26f56";
"themeLighterAlt" = "#fef9f8";
"themeLighter" = "#fde7e3";
"themeLight" = "#fbd3cb";
"themeTertiary" = "#f7a898";
"themeSecondary" = "#f4816a";
"themeDarkAlt" = "#da664e";
"themeDark" = "#b85642";
"themeDarker" = "#883f31";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#c2c2c2";
"neutralSecondary" = "#858585";
"neutralPrimaryAlt" = "#4b4b4b";
"neutralPrimary" = "#333333";
"neutralDark" = "#272727";
"black" = "#1d1d1d";
"white" = "#ffffff";
"primaryBackground" = "#ffffff";
"primaryText" = "#333333";
"bodyBackground" = "#ffffff";
"bodyText" = "#333333";
"disabledBackground" = "#f4f4f4";
"disabledText" = "#c8c8c8";
}

Le code est exécuté comme suit :

4. Une fois la saisie effectuée, nous devons exécuter la commande pour télécharger notre thème sur SharePoint Online.  Cela se fait en exécutant la commande suivante.

Add-SPOTheme -Identity “Practical 365” -Palette $themepalette IsInverted $false

L’exécution réussie de cette commande est indiquée comme suit.

Appliquer un thème de couleurs personnalisé à votre site

Une fois notre thème téléchargé sur SharePoint Online, nous l’activons en revenant à la page de renvoi du site. Pour ce faire, cliquez sur la roue crantée en haut à droite de l’écran. Puis sélectionnez Changer l’apparence, et enfin Thème. Nous pouvons voir que nous avons un nouveau thème personnalisé disponible dans notre liste de thèmes.

Une fois que nous avons sélectionné ce thème, il appliquera l’apparence à notre nouvelle page. C’est ce que montre l’image suivante :

Nous avons maintenant notre page de site de communication prête avec logo, titre et thème. 

L’étape suivante de la création de notre intranet consiste à alimenter notre page de renvoi avec du contenu pertinent. Il est important de bien réfléchir à ce que l’on va inclure sur la page de destination. Cette page sera le point de départ pour nos utilisateurs. Et si nous voulons qu’elle soit adoptée avec succès, elle doit avoir le bon contenu. 

Voyons comment nous pouvons ajouter le contenu requis à notre nouvelle page de renvoi.

Créer votre page d’accueil

Pour construire notre page de renvoi, nous devons l’alimenter avec des composants Web qui contiennent des informations utiles.  Il est possible d’ajouter de nombreux composants Web et de choisir parmi plusieurs paramètres de mise en page des colonnes.

Outre les composants Web que vous ajouterez par la suite, vous pouvez également sélectionner d’autres composants Web.

Le composant Web Image est utile si vous souhaitez ajouter une bannière à votre page de renvoi. Et le flux Twitter est également quelque chose que mes clients aiment ajouter.  Les calendriers de groupe et les événements sont également des composants Web utiles.

Chaque fois que je crée une nouvelle page d’accueil d’intranet, j’ai toujours tendance à inclure la même mise en page. Je vais baser les exemples suivants sur ces choix, mais vous êtes bien sûr libre de configurer vos propres webparts.

Je recommande normalement d’ajouter les webparts suivants lorsque je crée une page de renvoi d’un intranet.

• Hero – Affichez de manière visible jusqu’à 5 éléments de contenu dans une mise en page très visuelle.
• Quick Links – Ajouter des liens vers des documents et des pages importants
• News – Afficher les nouvelles récentes
• Weather – Afficher les conditions météorologiques actuelles sur votre page
• Image – Afficher une image sur votre page (comme une bannière)

Ajout de composants Web

Afin de modifier notre page d’accueil, nous devons effectuer les étapes suivantes.

1. Naviguez vers notre nouvelle page d’accueil. Cliquez sur le bouton Modifier de la barre d’information, comme le montre l’image suivante. 

Remarque : la barre d’information n’est visible que pour les propriétaires et les administrateurs de sites.

2. La page passe en mode édition comme indiqué ci-dessous :

3. Cliquez sur le + pour ajouter un nouveau composant Web.

Ajouter un composant web Hero

Le premier composant Web que j’aime ajouter comme point focal de la page d’accueil est le composant Web Hero. Il s’agit d’un composant Web visuel conçu pour attirer l’attention des utilisateurs de votre page d’accueil.

1. Lorsque vous cliquez pour ajouter le composant web Hero, il s’affiche initialement comme indiqué ci-dessous.

2. Cliquez sur le symbole du crayon pour modifier votre partie web hero.

3. Vous verrez les options de mise en page suivantes. Je préfère avoir trois tuiles, mais vous pouvez choisir celle qui vous convient.

4. Le composant Web Hero se présente maintenant sous la forme de trois tuiles, comme indiqué ci-dessous. Cliquez sur le lien Sélectionner dans l’une des tuiles pour alimenter le composant Web avec le contenu que vous souhaitez promouvoir sur votre page de renvoi.

5. Dans l’exemple suivant, j’ai rempli le premier composant web Hero avec un lien web, fourni un titre et téléchargé une image personnalisée.

6. Une fois ces paramètres ajoutés et enregistrés, la première tuile de la partie web de Hero est remplie comme indiqué ci-dessous.

7. Je suis allé de l’avant et j’ai ajouté du contenu aux autres tuiles, puis j’ai cliqué sur Republier pour que mes ajouts soient disponibles pour tous les utilisateurs.

Comme vous pouvez le constater, le composant web Hero est une méthode visuelle très puissante pour communiquer des informations instantanées à votre public.

Conclusion

Dans cet article, je vous ai montré les étapes pour alimenter votre nouveau site de communication SharePoint Online en contenu. Nous avons vu comment la partie web Hero est un moyen extrêmement visuel de promouvoir le contenu.

Dans la troisième partie, nous vous montrerons comment ajouter d’autres sections et éléments Web dans diverses formations sur la page. Cela produira une expérience de page de renvoi intranet moderne et professionnelle.