WYSIWYG HTML et styles CSS inline compatibles

Les champs personnalisés WYSIWYG de NinjaOne exploitent une liste d'éléments autorisés et de styles CSS inline compatibles qui peuvent être utilisés pour le contenu. NinjaOne fournit également des classes CSS que les techniciens peuvent utiliser pour implémenter divers styles dans NinjaOne.

Table des matières :

• Utilisation de l'éditeur WYSIWYG dans NinjaOne 
• Utiliser l'API et la CLI pour le HTML et le style CSS inline 
• Éléments HTML
• Options de style inline
• Classes CSS de NinjaOne

Utilisation de l'éditeur WYSIWYG dans NinjaOne : 

L'application NinjaOne Documentation propose des champs WYSIWYG (What You See is What You Get, « tel écran, tel écrit ») à la fois dans la base de connaissances et en tant que champ personnalisé pour les modèles de documents. 

Fonctionnalité WYSIWYG : 

• Par défaut, lorsqu'un champ HTML contient plus de 10 000 caractères, il se réduit et l'utilisateur doit cliquer sur le bouton « Développer » pour en voir le contenu complet.
• La limite maximale de caractères pour les WYSIWYG est de 200 000 caractères.
• Il ne peut y avoir plus de 20 champs personnalisés WYSIWYG par formulaire ou modèle de document. Lorsque la limite est atteinte, il n'est plus possible de sélectionner l'option WYSIWYG comme type de champ.

Utiliser l'API et la CLI pour le HTML et le style CSS inline 

Les administrateurs système et les techniciens de NinjaOne peuvent recourir au HTML et au style CSS inline lors de la création de champs personnalisés Rôle/Global et de la documentation Applications et Services qui utilisent les champs de type « WYSIWYG ». 

Ces options de style permettent une plus grande flexibilité et une personnalisation de l'affichage des données dans NinjaOne. Par exemple, la capture d'écran ci-dessous montre à quoi ressemblerait un champ personnalisé contenant des widgets avec des liens hypertextes : 

Remarque importante : Ces options de style doivent être appliquées à partir de l'API ou de la CLI et ne peuvent pas être appliquées à partir de la console NinjaOne pour le moment. 

Vous trouverez ci-dessous une liste complète des éléments et des classes CSS qui peuvent être utilisés pour mettre en forme votre contenu :

Éléments HTML :

Options de style inline :

Classes CSS de NinjaOne :

La documentation et les champs personnalisés de NinjaOne sont compatibles avec le système de grille Bootstrap 5 et la bibliothèque gratuite Font Awesome 6 pour les icônes. Nous fournissons également plusieurs classes permettant aux techniciens d'accéder aux styles NinjaOne.

• Fiche standard
• Fiche avec action
• Tableaux
• Paragraphes
• Rubriques
• Boutons
• Fiches d'information
• Étiquettes
• Fiches statistiques
• Graphique linéaire

Fiche standard

<div class="card flex-grow-1">
  <div class="card-title-box">
    <div class="card-title"><i class="fas fa-building"></i>&nbsp ;&nbsp ;Infos du tenant</div>
  </div>
  <div class="card-body">
    <p class="card-text"></p>
    <p><b>Nom du tenant</b><br>Exemple de client</p>
    <p><b>Domaine par défaut</b><br>exemple.onmicrosoft.com</p>
    <p><b>ID du tenant</b><br>123456-123432-234324-432463452-123</p>
    <p><b>Date de création</b><br>07/18/2023 10:51:46</p>
    <p><b>Domaines</b><br>example.onmicrosoft.com
    </p>
    <p><b>Utilisateurs administrateurs</b><br>EXO_App2, MOD Administrator, MOD Administrator, Microsoft Service Account, Allan
       Deyoung, Nestor Wilke, Isaiah Langer, Megan Bowen, Lidia Holloway</p>
    <p></p>
  </div>
</div>

Fiche avec action

<div class="card flex-grow-1">
  <div class="card-title-box">
    <div class="card-title"><i class="fas-shield-halved"></i>&nbsp ;&nbsp;Standards CIPP appliqués</div>
    <div class="card-link-box"><a
           href="https://localhost:4280/tenant/standards/list-applied-standards ?customerId=1e593540-8f80-4831-87a9-f1f95804a206"
           target="_blank" class="card-link" rel="nofollow noopener noreferrer"><i
              class="fas fa-arrow-up-right-from-square" style="color : #337ab7 ;"></i></a></div>
  </div>
  <div class="card-body">
    <p class="card-text"></p>
    <ul>
        <li><span>Désactiver les licences en libre-service (AllTenants)</span></li>
        <li><span>Activer les noms d'utilisateur les noms pseudo anonymisés dans les rapports
 (exemple.onmicrosoft.com)</span></li>
    </ul>
    <p></p>
  </div>
</div>

Tableaux

<>
  <>
    <><>
       <><>
       <><>
       <><>
       <>table>
       <thead>
       <tr>
       <th>Testing</th>
       <th>Testing</th>
       <th>Testing</th>
    <th>Testing</th>
  <th>Testing</th>
  <th>Testing</th>
    <th>Testing</th>
       <th>Testing</th>
       <th>Testing</th>
       </tr>
       </thead>
       < celui-ci a un texte beaucoup plus long testing testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
    <tr class="danger">
       <td>Testing</td>
       <td>Testing celui-ci a un texte beaucoup plus long testing testing testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
    <tr class="success">
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing celui-ci a un texte beaucoup plus long testing testing testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
    <tr class="other">
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing this one has a lot longer texte testing testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
    <tr class="warning">
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing celui-ci a un texte beaucoup plus long testing testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
    <tr class="unknown">
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing celui-ci a un texte beaucoup plus long testing testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
  </tbody>
</table>

Paragraphes

<p>Ceci est un exemple de paragraphe Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit
   amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Bold Text</strong> Lorem ipsum dolor sit
   amet, consectetur adipiscing elit.</p>

Rubriques

<h1>Rubriques</h1>
<h1>Rubrique 1</h1>
<h2>Rubrique 2</h2>
<h3>Rubrique 3</h3>
<h4>Rubrique 4</h4>
<h5>Rubrique 5</h5>

Boutons

<a href="https://example.com" target="_blank" class="btn">Bouton principal</a>
<a href="https://example.com" target="_blank" class="btn secondary">Bouton secondaire</a>
<a href="https://example.com" target="_blank" class="btn danger">Bouton de risque</a>

Fiches d'information

<div class="info-card">
  <i class="info-icon fa-solid fa-circle-info"></i>
  <div class="info-text">
    <div class="info-title">Intitulé de l'information</div>
    <div class="info-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>


<div class="info-card error">
  <i class="info-icon fa-solid fa-circle-exclamation"></i>
  <div class="info-text">
    <div class="info-title">Intitulé de l'erreur</div>
    <div class="info-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>


<div class="info-card warning">
  <i class="info-icon fa-solid fa-triangle-exclamation"></i>
  <div class="info-text">
    <div class="info-title">Intitulé de l'avertissement</div>
    <div class="info-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>


<div class="info-card success">
  <i class="info-icon fa-solid fa-circle-check"></i>
  <div class="info-text">
    <div class="info-title">Intitulé de la réussite</div>
    <div class="info-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>

Étiquettes

<div class="tag">Activé</div>
<div class="tag désactivé">Désactivé</div>
<div class="tag expiré">Expiré</div>

Fiches statistiques

<div class="stat-card">
  <div class="stat-value"><a href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"><span
              style="color: #CCCCCC;"><i class="fas fa-circle-xmark"></i></span></a></div>
  <div class="stat-desc"><a href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"><span
              style="font-size: 18px;"><span style="white-space:nowrap;">AD</span>&nbsp;<span
                  style="white-space:nowrap;">Connect</span></span></a></div>
</div>

<div class="stat-card">
  <div class="stat-value"><a href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"
            style="color: #008001;">0</a></div>
  <div class="stat-desc"><a href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"><span
              style="font-size: 18px;">Expéditeurs bloqués</span></a></div>
</div>

Graphique linéaire

<div class="p-3 linechart">
   <div style="width : 33.3333333333% ; background-color : #55ACBF ;"></div>
   <div style="width : 33.3333333333% ; background-color : #3633B7 ;"></div>
   <div style="width : 33.3333333333% ; background-color : #8063BF ;"></div>
</div>
<ul class="unstyled p-3" style="display : flex ; justify-content : space-between ; ">
   <li><span class="chart-key" style="background-color : #55ACBF ;"></span><span>
      Avec licence (20)</span></li>
   <li><span class="chart-key" style="background-color : #3633B7 ;"></span><span>
      Sans licence (20)</span></li>
   <li><span class="chart-key" style="background-color : #8063BF ;"></span><span>
      Invités (20)</span></li>
</ul>

Documentation connexe : 

• Champs personnalisés : Gestion
• Documentation NinjaOne : Applications et services