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 utilizzati per tali elementi. NinjaOne fornisce inoltre classi CSS che i tecnici possono utilizzare per la personalizzazione dello stile di NinjaOne.

Sommario:

Uso dell’editor WYSIWYG in NinjaOne
Uso dell’HTML e degli stili inline tramite API e CLI
Elementi HTML
Opzioni di stile inline
Grafici
Classi CSS di NinjaOne

Uso dell'editor WYSIWYG in NinjaOne:

L'applicazione NinjaOne Documentazione offre campi WYSIWYG (What You See is What You Get) sia nella Knowledge Base che come campi personalizzati 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 ogni modulo o modello di documento. Una volta raggiunto il limite, la selezione WYSIWYG per il tipo di campo verrà bloccata.

Uso di HTML e stili inline tramite API e CLI:

Gli amministratori di sistema e i tecnici di NinjaOne possono utilizzare l’HTML e gli 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: al momento queste opzioni di stile devono essere applicate tramite API o CLI e non possono essere gestite direttamente dalla console di NinjaOne.

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

Elementi HTML:

Elemento	Supporto per 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 Hex. (es.: RGB (240,30,50,.7), #f015ca)
Colore di sfondo	Codici colore RGB o codici Hex. (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	normal, break-all, keep-all, break-word
box-sizing	border-box, content-box
spazio-bianco	normale, senza-rientro, pre, con-rientro, pre-linea, interruzioni-spazi
overflow-wrap	Normale, break-word, pre, ovunque
text-align	inizio, fine, sinistra, centro, destra, giustificato, giustificato-tutto, allinea-al-genitore
width	Valori di unità CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
altezza	Valori di unità CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
font-size	Valori di unità CSS validi (ad es., 100%, 400px, Automatico, 2em, ecc.)
font-family	serif, sans-serif, monospace, cursive, fantasy, sistema-ui, emoji
margin	Valori di unità CSS validi (ad es., 100%, 400px, Automatico, 2em, ecc.)
margin-top	Valori di unità CSS validi (ad es., 100%, 400px, Automatico, 2em, ecc.)
margin-right	Valori di unità CSS validi (ad es., 100%, 400px, Automatico, 2em, ecc.)
margin-bottom	Valori di unità CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
margin-left	Valori di unità CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
padding	Valori di unità CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
padding-top	Valori di unità CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
padding-right	Valori di unità CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
padding-bottom	Valori di unità CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
padding-left	Valori di unità CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
border-width	Valori unitari CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
border-style	nessuno, solid, dashed, inset, outset
border-color	Codici colore RGB o codici Hex (es.: RGB(240,30,50,.7), #f015ca)
border-top	Valori di unità CSS validi (ad es., 100%, 400px, Automatico, 2em, ecc.)
border-right	Valori di unità CSS validi (ad es., 100%, 400px, Automatico, 2em, ecc.)
border-bottom	Valori di unità CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
border-left	Valori di unità CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
border-radius	Valori di unità CSS validi (ad es. 100%, 400px, Automatico, 2em, ecc.)
border-collapse	Comprimi, separa

Grafici:

NinjaOne supporta Charts.css, un nuovo framework open source per la visualizzazione dei dati. Per altre 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>
<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% <DIV> <TD style="--size: 0.6"> <SPAN class="data"> 60% </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:
-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"XML> <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 colXMLspan> </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:

 --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;"Avvia:

 --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; <DIV><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;"
--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> 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;
<TD style="--start: 0.8; --end: 0.7;"><SPAN class="data"> 70 </SPAN></TD>
<td style="--start: 0.7; <LI><SPAN class="data"> 100 </SPAN></LI>
</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;"<DIV><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;
<TD style="--start: 0.9; --end: 0.8;"><SPAN class="data"> 80 </SPAN></TD>
<td style="--start: 0.7; <DIV><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.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;"<DIV><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, mettiamo a disposizione diverse classi per consentire ai tecnici di accedere agli stili di NinjaOne.

Scheda Standard
Scheda con azione
Tabella
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;<DIV>Dettagli dell’inquilino</DIV>
 </DIV>
 <DIV class="card-body">
   <P class="card-text"></P>
   <P><B>Nome dell’inquilino</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><B>Domini</B><BR>example.onmicrosoft.com
   </P>
   <P><B>Utenti amministratori</B><BR>EXO_App2, Amministratore MOD, Amministratore MOD, Account di servizio Microsoft, 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 applicati dal CIPP</DIV>
   <DIV class="card-link-box"><a
          href="https://localhost:4280/tenant/standards/list-applied-standards?customerId=1e593540-8f80-4831-87a9-f1f95804a206"
          <DIV><I
             class="fas fa-arrow-up-right-from-square" style="color: #337ab7;"></I></A></DIV>
 <DIV class="card-body">
 <P class="card-text"></<P></P>
   <P></P>
 </DIV>
</DIV>

Tabella

















 Verifica in corso<DIV>thead>
 <TBODY>
   <TR>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso questo ha un testo molto più lungo Verifica Verifica Verifica Verifica Verifica Verifica Verifica</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</</DIV></DIV>td>
      <TD>verifica in corso</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>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso: questo ha un testo molto più lungo verifica verifica verifica</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
   </tr>
 <tr class="other">
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
   </tr>
 <tr class="warning">
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test: questo contiene 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>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</TD>
      <TD>Verifica in corso</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>Titoli</H1>
<H1>Titolo 1</H1>
<H2>Titolo 2</H2>
<H3>Titolo 3</H3>
<H4>Titolo 4</H4>
<H5>Titolo 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>
 <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>
 <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 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<DIV>
     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 disabilitato">Disabilitato</DIV>
<DIV class="tag scaduto">Scaduto</DIV>

Schede statistiche




 Nessun valore<DIV><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;"<DIV>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%; Colore di sfondo: #55ACBF;<div></DIV>
  <DIV style="width: 33.3333333333%; Colore di sfondo: #55ACBF;<div></DIV></DIV></DIV></DIV> 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="colore di sfondo: #8063BF;"></SPAN><SPAN>
     Ospiti (20)</SPAN></LI>
</UL>

Documentazione correlata:

WYSIWYG: HTML e style in linea supportati

Sommario:

Uso dell'editor WYSIWYG in NinjaOne:

Uso 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

Tabella

Paragrafi

Intestazioni

Pulsanti

Schede informative

Tag

Schede statistiche

Grafico a linee

Domande frequenti

Passi successivi

Risorse

Azienda

Informazioni di contatto