WYSIWYG: HTML e style in linea supportati

I campi personalizzati WYSIWYG di NinjaOne gestiscono un elenco di elementi e stili in linea supportati che possono essere utilizzati per gli elementi. NinjaOne fornisce anche classi CSS che i tecnici possono utilizzare per lo stile di NinjaOne.

Indice:

• Utilizzo dell'editor WYSIWYG in NinjaOne 
• Utilizzo dell'HTML e dello stile in linea tramite API e CLI 
• Elementi HTML
• Opzioni di stile in linea
• Classi CSS di NinjaOne

Utilizzo dell'editor WYSIWYG in NinjaOne: 

L'applicazione NinjaOne Documentation offre campi WYSIWYG (What You See is What You Get) sia nella Knowledge Base che come campo personalizzato per i modelli di documento. 

Funzionalità WYSIWYG: 

• Per impostazione predefinita, quando un campo HTML supera i 10.000 caratteri, viene ridotto e l'utente deve cliccare sul pulsante Espandi per visualizzare l'intero contenuto.
• Il limite massimo di caratteri per i WYSIWYG è di 200 mila caratteri.
• Non ci possono essere più di 20 campi personalizzati WYSIWYG per modulo o modello di documento. Una volta raggiunto il limite, la selezione WYSIWYG per il tipo di campo verrà bloccata.

Utilizzo dell'HTML e dello stile in linea tramite API e CLI: 

Gli amministratori e i tecnici di sistema di NinjaOne possono utilizzare l'HTML e lo stile in linea durante la creazione di campi personalizzati di ruolo/globali e di documentazione di applicazioni e servizi che utilizzano il tipo di campo "WYSIWYG". 

Queste opzioni di stile consentono una maggiore flessibilità e personalizzazione nella visualizzazione dei dati in NinjaOne. Per esempio, la schermata seguente mostra come apparirebbe se un campo personalizzato contenesse widget con collegamenti ipertestuali: 

Nota importante: Queste opzioni di stile devono essere applicate dall'API o dalla CLI e al momento non possono essere eseguite dalla console di NinjaOne. 

Per un elenco completo degli elementi e delle classi CSS che possono essere utilizzati per costruire i contenuti, vedi di seguito:

Elementi HTML:

Opzioni di stile in linea:

Classi CSS di NinjaOne:

La documentazione e i campi personalizzati di NinjaOne supportano il sistema Bootstrap 5 Grid e la libreria Free Font Awesome 6 per le icone. Inoltre, forniamo diverse classi per consentire ai tecnici di accedere agli stili di NinjaOne.

• Scheda standard
• Scheda con azione
• Tabelle
• Paragrafi
• Titoli
• Pulsanti
• Schede informative
• Tag
• Schede statistiche
• Grafico a linee

Scheda standard

<div class="card flex-grow-1">
  <div class="card-title-box">
    <div class="card-title"><i class="fas fa-building"></i>&nbsp;&nbsp;Tenant Details</div>
  </div>
  <div class="card-body">
    <p class="card-text"></p>
    <p><b>Tenant Name</b><br>Example Customer</p>
    <p><b>Default Domain</b><br>example.onmicrosoft.com</p>
    <p><b>Tenant ID</b><br>123456-123432-234324-432463452-123</p>
    <p><b>Creation Date</b><br>07/18/2023 10:51:46</p>
    <p><b>Domains</b><br>example.onmicrosoft.com
    </p>
    <p><b>Admin Users</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>

Scheda con azione

<div class="card flex-grow-1">
  <div class="card-title-box">
    <div class="card-title"><i class="fas fa-shield-halved"></i>&nbsp;&nbsp;CIPP Applied Standards</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>Disable Self Service Licensing (AllTenants)</span></li>
        <li><span>Enable Usernames instead of pseudo anonymised names in reports
                (example.onmicrosoft.com)</span></li>
    </ul>
    <p></p>
  </div>
</div>

Tabelle

<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>
  <tbody>
    <tr>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing this one has a lot longer text 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 this one has a lot longer text 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 this one has a lot longer text 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 text 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 this one has a lot longer text 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 this one has a lot longer text testing testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
  </tbody>
</table>

Paragrafi

<p>Questo è un paragrafo di esempio 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>

Titoli

<h1>Headings</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

Pulsanti

<a href="https://example.com" target="_blank" class="btn">Primary Button</a>
<a href="https://example.com" target="_blank" class="btn secondary">Secondary Button</a>
<a href="https://example.com" target="_blank" class="btn danger">Danger Button</a>

Schede informative

<div class="info-card">
  <i class="info-icon fa-solid fa-circle-info"></i>
  <div class="info-text">
    <div class="info-title">Informational title</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">Error title</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">Warning title</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">Success title</div>
    <div class="info-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>

Tag

<div class="tag">Enabled</div>
<div class="tag disabled">Disabled</div>
<div class="tag expired">Expired</div>

Schede statistiche

<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;">Blocked Senders</span></a></div>
</div>

Grafico a linee

<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>
      Licensed (20)</span></li>
   <li><span class="chart-key" style="background-color: #3633B7;"></span><span>
      Unlicensed (20)</span></li>
   <li><span class="chart-key" style="background-color: #8063BF;"></span><span>
      Guests (20)</span></li>
</ul>

Documentazione correlata: 

• Campi personalizzati: visualizzazione e modifica
• NinjaOne Documentation: App e servizi