WYSIWYG: HTML e style in linea supportati

I campi personalizzati WYSIWYG di NinjaOne utilizzano un elenco di elementi consentiti e di stili inline supportati che possono essere applicati a tali elementi. NinjaOne fornisce inoltre classi CSS che i tecnici possono utilizzare per la personalizzazione dello stile di NinjaOne.

Indice:

Utilizzo dell'editor WYSIWYG in NinjaOne
Utilizzo di HTML e stili inline tramite API e CLI
Elementi HTML
Opzioni di stile inline
Grafici
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 contiene più di 10.000 caratteri, viene compresso e l'utente deve fare clic sul pulsante di espansione per visualizzarne l'intero contenuto.
Il limite massimo di caratteri per i campi WYSIWYG è di 200.000 caratteri.
Non possono esserci 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 di HTML e stili inline tramite API e CLI:

Gli amministratori di sistema e i tecnici di NinjaOne possono utilizzare HTML e stili inline durante la creazione di campi personalizzati di ruolo/globali e della documentazione di app 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. Ad esempio, la schermata qui sotto mostra come apparirebbe un campo personalizzato contenente widget con collegamenti ipertestuali:

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

Di seguito è riportato un elenco completo degli elementi e delle classi CSS che è possibile utilizzare per creare i propri contenuti:

Elementi HTML:

Elemento	Supporta le classi NinjaOne?
a	Sì
blockquote	Sì
didascalia	Sì
codice
col	Sì
div	Sì
h1	Sì
h2	Sì
h3	Sì
h4	Sì
h5	Sì
h6	Sì
i	Sì
li	Sì
ol	Sì
p	Sì
pre
span	Sì
tabella	Sì
tbody	Sì
td	Sì
tfoot	Sì
th	Sì
thead	Sì
tr	Sì
ul	Sì

Opzioni di stile inline:

Stile	Valori consentiti
colore	Codici colore RGB o esadecimali. (es.: RGB (240,30,50,.7), #f015ca)
colore-sfondo	Codici colore RGB o esadecimali. (es.: RGB (240,30,50,.7), #f015ca)
display	block, inline, inline-block, flex, inline-flex
justify-content	center, start, end, flex, flex-start, flex-end, left, right, normal, space-between, space-around, space-evenly
align-items	centro, inizio, fine, flex, inizio-flex, fine-flex, sinistra, destra, normale, allungato
word-break	normale, interruzione-tutta, mantieni-tutta, interruzione-parola
box-sizing	border-box, content-box
spazio-bianco	normale, senza-rientro, pre, pre-rientro, pre-riga, spazi-di-separazione
overflow-wrap	normale, interruzione-parola, pre, ovunque
allineamento-testo	inizio, fine, sinistra, centro, destra, giustifica, giustifica-tutto, allinea-al-genitore
width	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
altezza	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
dimensione-carattere	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
font-family	serif, sans-serif, monospace, cursive, fantasy, system-ui, emoji
margin	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
margin-top	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
margin-right	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
margin-bottom	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
margin-left	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
padding	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
padding-top	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
padding-right	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
padding-bottom	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
padding-left	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
border-width	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
border-style	none, solid, dashed, inset, outset
border-color	Codici colore RGB o esadecimali (es.: RGB(240,30,50,.7), #f015ca)
border-top	Valori di unità CSS validi (ad es., 100%, 400px, auto, 2em, ecc.)
border-right	Valori di unità CSS validi (ad es., 100%, 400px, auto, 2em, ecc.)
border-bottom	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
border-left	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
border-radius	Valori di unità CSS validi (ad es. 100%, 400px, auto, 2em, ecc.)
border-collapse	collapse, separate

Grafici:

NinjaOne supporta Charts.css, un nuovo framework open source per la visualizzazione dei dati. Per ulteriori informazioni, consultare Introduzione | Charts.css (chartscss.org).

NinjaOne consiglia di utilizzare i comandi Piped per impostare l'HTML nei campi personalizzati tramite la CLI.

$HTML | Ninja-Property-Set-Piped fieldName

Esempio:

<div class="row g-3">
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex">
<table class="charts-css column show-heading">


<tbody>
<tr>
<td style="--size: 0.4"> <span class="data"> 40% </span> </td>
</tr>
<tr>
<td style="--size: 0.6"> <span class="data"> 60% </span> </td>
</tr>
<tr>
<td style="--size: 0.75"> <span class="data"> 75% </span> </td>
</tr>
<tr>
<td style="--size: 0.9"> <span class="data"> 90% </span> </td>
</tr>
<tr>
<td style="--size: 1"> <span class="data"> 100% </span> </td>
</tr>
</tbody>

</table>

</div>

<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex">

<table class="charts-css column show-data-on-hover show-heading">
<tbody>
<tr>
<td style="--size: 0.4"> <span class="data"> 40% </span> </td>
</tr>
<tr>
<td style="--size: 0.6"> <span class="data"> 60% </span> </td>
</tr>
<tr>
<td style="--size: 0.75"> <span class="data"> 75% </span> </td>
</tr>
<tr>
<td style="--size: 0.9"> <span class="data"> 90% </span> </td>
</tr>
<tr>
<td style="--size: 1"> <span class="data"> 100% </span> </td>
</tr>
</tbody>

</table>

</div>

<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex">

<table class="charts-css bar show-heading">
<tbody>
<tr>
<td style="--size: 0.4"> <span class="data"> 40% </span> </td>
</tr>
<tr>
<td style="--size: 0.6"> <span class="data"> 60% </span> </td>
</tr>
<tr>
<td style="--size: 0.75"> <span class="data"> 75% </span> </td>
</tr>
<tr>
<td style="--size: 0.9"> <span class="data"> 90% </span> </td>
</tr>
<tr>
<td style="--size: 1"> <span class="data"> 100% </span> </td>
</tr>
</tbody>

</table>

</div>


<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12">
<div class="row g-3">
<div class="col-12">
<table
class="charts-css line multiple show-data-on-hover show-labels show-primary-axis show-10-secondary-axes show-heading">
<tbody>
<tr>
<th scope="row"> 21-03 </th>
<td style="--start: 0.1; --end: 0.3;"><span class="data"> 30 </span></td>
<td style="--start: 0.6; --end: 0.4;"><span class="data"> 40 </span></td>
<td style="--start: 0.8; --end: 0.7;"><span class="data"> 70 </span></td>
<td style="--start: 0.7; --end: 0.9;"><span class="data"> 100 </span></td>
</tr>
<tr>
<th scope="row"> 20-03 </th>
<td style="--start: 0.3; --end: 0.1;"><span class="data"> 10 </span></td>
<td style="--start: 0.4; --end: 0.6;"><span class="data"> 60 </span></td>
<td style="--start: 0.7; --end: 0.9;"><span class="data"> 90 </span></td>
<td style="--start: 0.9; --end: 0.7;"><span class="data"> 70 </span></td>
</tr>
<tr>
<th scope="row"> 19-03 </th>
<td style="--start: 0.1; --end: 0.3;"><span class="data"> 30 </span></td>
<td style="--start: 0.6; --end: 0.4;"><span class="data"> 40 </span></td>
<td style="--start: 0.9; --end: 0.8;"><span class="data"> 80 </span></td>
<td style="--start: 0.7; --end: 0.9;"><span class="data"> 90 </span></td>
</tr>
<tr>
<th scope="row"> 18-03 </th>
<td style="--start: 0.3; --end: 0.1;"><span class="data"> 10 </span></td>
<td style="--start: 0.4; --end: 0.6;"><span class="data"> 60 </span></td>
<td style="--start: 0.8; --end: 0.8;"><span class="data"> 80 </span></td>
<td style="--start: 0.9; --end: 0.9;"><span class="data"> 90 </span></td>
</tr>
<tr>
<th scope="row"> 17-03 </th>
<td style="--start: 0.1; --end: 0.3;"><span class="data"> 30 </span></td>
<td style="--start: 0.6; --end: 0.4;"><span class="data"> 40 </span></td>
<td style="--start: 0.8; --end: 1.0;"><span class="data"> 100 </span></td>
<td style="--start: 0.9; --end: 0.7;"><span class="data"> 70 </span></td>
</tr>
</tbody>
</table>

</div>
<div class="col-12">

<ul class="charts-css legend legend-inline legend-rectangle">
<li> C: </li>
<li> D: </li>
<li> CPU </li>
<li> Memoria </li>
</ul>

</div>
</div>
</div>




<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex">

<table class="charts-css area show-heading">
<tbody>
<tr>
<th scope="row"> 21-03 </th>
<td style="--start: 0.1; --end: 0.3;"><span class="data"> 30 </span></td>
<td style="--start: 0.6; --end: 0.4;"><span class="data"> 40 </span></td>
<td style="--start: 0.8; --end: 0.7;"><span class="data"> 70 </span></td>
<td style="--start: 0.7; --end: 0.9;"><span class="data"> 100 </span></td>
</tr>
<tr>
<th scope="row"> 20-03 </th>
<td style="--start: 0.3; --end: 0.1;"><span class="data"> 10 </span></td>
<td style="--start: 0.4; --end: 0.6;"><span class="data"> 60 </span></td>
<td style="--start: 0.7; --end: 0.9;"><span class="data"> 90 </span></td>
<td style="--start: 0.9; --end: 0.7;"><span class="data"> 70 </span></td>
</tr>
<tr>
<th scope="row"> 19-03 </th>
<td style="--start: 0.1; --end: 0.3;"><span class="data"> 30 </span></td>
<td style="--start: 0.6; --end: 0.4;"><span class="data"> 40 </span></td>
<td style="--start: 0.9; --end: 0.8;"><span class="data"> 80 </span></td>
<td style="--start: 0.7; --end: 0.9;"><span class="data"> 90 </span></td>
</tr>
<tr>
<th scope="row"> 18-03 </th>
<td style="--start: 0.3; --end: 0.1;"><span class="data"> 10 </span></td>
<td style="--start: 0.4; --end: 0.6;"><span class="data"> 60 </span></td>
<td style="--start: 0.8; --end: 0.8;"><span class="data"> 80 </span></td>
<td style="--start: 0.9; --end: 0.9;"><span class="data"> 90 </span></td>
</tr>
<tr>
<th scope="row"> 17-03 </th>
<td style="--start: 0.1; --end: 0.3;"><span class="data"> 30 </span></td>
<td style="--start: 0.6; --end: 0.4;"><span class="data"> 40 </span></td>
<td style="--start: 0.8; --end: 1.0;"><span class="data"> 100 </span></td>
<td style="--start: 0.9; --end: 0.7;"><span class="data"> 70 </span></td>
</tr>
</tbody>
</table>
</div>




<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex" style="height:300px; width: 300px;">

<table class="charts-css pie show-heading">
<tbody>
<tr>
<th scope="row"> 21-03 </th>
<td style="--start: 0; --end: 0.2;"><span class="data"> 30 </span></td>
</tr>
<tr>
<th scope="row"> 20-03 </th>
<td style="--start: 0.2; --end: 0.3;"><span class="data"> 10 </span></td>
</tr>
<tr>
<th scope="row"> 19-03 </th>
<td style="--start: 0.3; --end: 0.55;"><span class="data"> 30 </span></td>
</tr>
<tr>
<th scope="row"> 18-03 </th>
<td style="--start: 0.55; --end: 0.75;"><span class="data"> 10 </span></td>
</tr>
<tr>
<th scope="row"> 17-03 </th>
<td style="--start: 0.75; --end: 1;"><span class="data"> 30 </span></td>
</tr>
</tbody>
</table>
</div>
</div>

Classi CSS di NinjaOne:

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

Scheda standard
Scheda con azione
Tabelle
Paragrafi
Intestazioni
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;Dettagli tenant</div>
 </div>
 <div class="card-body">
   <p class="card-text"></p>
   <p><b>Nome tenant</b><br>Cliente di esempio</p>
   <p><b>Dominio predefinito</b><br>example.onmicrosoft.com</p>
   <p><b>ID tenant</b><br>123456-123432-234324-432463452-123</p>
   <p><b>Data di creazione</b><br>18/07/2023 10:51:46</p>
   <p><b>Domini</b><br>example.onmicrosoft.com
   </p>
   <p><b>Utenti amministratori</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;Standard CIPP applicati</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>Disabilita licenze self-service (AllTenants)</span></li>
       <li><span>Abilita nomi utente invece di nomi pseudo-anonimizzati nei report
               (example.onmicrosoft.com)</span></li>
   </ul>
   <p></p>
 </div>
</div>

Tabelle

<table>
 <thead>
   <tr>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
   </tr>
 </thead>
 <tbody>
   <tr>
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test questo ha un testo molto più lungo test test test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
   </tr>
   <tr class="danger">
      <td>Test</td>
      <td>Test questo ha un testo molto più lungo test test test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
   </tr>
   <tr class="success">
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test questo ha un testo molto più lungo test test test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
   </tr>
   <tr class="other">
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test questo ha un testo molto più lungo test test test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
   </tr>
   <tr class="warning">
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test questo ha un testo molto più lungo test test test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
   </tr>
   <tr class="unknown">
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test questo ha un testo molto più lungo test test test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test</td>
      <td>test</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>Testo in grassetto</strong> Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.</p>

Intestazioni

<h1>Intestazioni</h1>
<h1>Intestazione 1</h1>
<h2>Intestazione 2</h2>
<h3>Intestazione 3</h3>
<h4>Intestazione 4</h4>
<h5>Intestazione 5</h5>

Pulsanti

<a href="https://example.com" target="_blank" class="btn">Pulsante principale</a>
<a href="https://example.com" target="_blank" class="btn secondary">Pulsante secondario</a>
<a href="https://example.com" target="_blank" class="btn danger">Pulsante di pericolo</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">Titolo informativo</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">Titolo dell'errore</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">Titolo dell'avviso</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">Titolo di successo</div>
   <div class="info-description">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </div>
</div>

Tag

<div class="tag">Abilitato</div>
<div class="tag disabled">Disabilitato</div>
<div class="tag expired">Scaduto</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;">ANNUNCIO</span>&nbsp;<span
                 style="white-space:nowrap;">Connettiti</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;">Mittenti bloccati</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>
     Con licenza (20)</span></li>
  <li><span class="chart-key" style="background-color: #3633B7;"></span><span>
     Senza licenza (20)</span></li>
  <li><span class="chart-key" style="background-color: #8063BF;"></span><span>
     Ospiti (20)</span></li>
</ul>

Documentazione correlata:

WYSIWYG: HTML e style in linea supportati

Indice:

Utilizzo dell'editor WYSIWYG in NinjaOne:

Utilizzo di HTML e stili inline tramite API e CLI:

Elementi HTML:

Opzioni di stile inline:

Grafici:

Classi CSS di NinjaOne:

Scheda standard

Scheda con azione

Tabelle

Paragrafi

Intestazioni

Pulsanti

Schede informative

Tag

Schede statistiche

Grafico a linee

Domande frequenti

Passi successivi

Risorse

Azienda

Informazioni di contatto