SAP UI5 - Temi
Il designer del tema dell'interfaccia utente è uno strumento basato su browser che ti consente di sviluppare i tuoi temi modificando uno dei modelli di temi forniti da SAP.
Example- Puoi cambiare la combinazione di colori o aggiungere il logo della tua azienda. Lo strumento fornisce un'anteprima dal vivo del tema durante la progettazione.
Applica il tuo marchio aziendale e guarda alle applicazioni create con le tecnologie dell'interfaccia utente SAP. Il designer del tema dell'interfaccia utente è uno strumento basato su browser per scenari con temi trasversali. Usalo per creare facilmente i temi della tua identità aziendale modificando uno dei modelli di temi forniti da SAP. Ad esempio, puoi modificare la combinazione di colori o aggiungere il logo della tua azienda. Lo strumento è destinato a diversi gruppi di utenti, inclusi sviluppatori, designer visivi e amministratori.
Piattaforma supportata
- SAP NetWeaver come ABAP (tramite UI Add-On 1.0 SP4)
- SAP NetWeaver Portal (7.30 SP10 e versioni successive)
- SAP HANA Cloud (pianificato)
- SAP NetWeaver Portal (7.02 pianificato)
Caratteristiche e vantaggi principali
Browser-based, graphical WYSIWYG editor - Modifica i valori dei parametri tematici e vede immediatamente come influisce sulla visualizzazione della pagina di anteprima selezionata.
Built-in preview pages - Seleziona le pagine di anteprima integrate per vedere come apparirà il tuo tema personalizzato quando viene applicato a un'applicazione -
Anteprime dell'applicazione (esempio: approvazione dell'ordine d'acquisto, SAP Fiori Launchpad)
Anteprime di controllo
Different levels of theming -
Temi rapidi (impostazioni del tema cross-technology di base)
Temi esperti (impostazioni del tema specifiche della tecnologia)
Modifica manuale LESS o CSS
Color palette for reuse - Specifica una serie di parametri con i principali valori di colore che definiscono il marchio aziendale.
Cross-technology theming - Crea un tema coerente che si applica a vari client e tecnologie dell'interfaccia utente SAP -
Librerie standard SAPUI5 (incluse applicazioni SAP Fiori e SAP Fiori Launchpad)
Tecnologie di rendering unificato (come Web Dynpro ABAP e Floorplan Manager)
SAP NetWeaver Business Client
Client dell'interfaccia utente SAP | Le parti dell'interfaccia utente possono essere tematizzate |
---|---|
Web Dynpro ABAP | È possibile applicare temi che non utilizzano i seguenti elementi dell'interfaccia utente:
È possibile utilizzare solo temi creati con il designer di temi dell'interfaccia utente per applicazioni Web Dynpro ABAP a partire da SAP NetWeaver 7.0 EHP2 |
Floorplan Manager per Web Dynpro ABAP (FPM) | È possibile utilizzare applicazioni a tema che non utilizzano HTMLIslands o Chart UIBB |
SAPUI5 | È possibile creare temi per le librerie SAP Standard. Le librerie SAPUI5 personalizzate non possono essere tematizzate |
SAP NetWeaver Business Client (NWBC) | NWBC per desktop (4.0 o versioni successive): è possibile creare temi della shell NWBC e delle pagine di panoramica (pagina indice, pagina nuova scheda, mappa dei servizi). NWBC per HTML (3.6): puoi creare un tema per la mappa dei servizi. La conchiglia non può essere tematizzata. |
Come chiamare un designer di temi in SAP Fiori?
Step 1- Accedi al server SAP Fiori Front-End. Puoi usareT-Code: Theme Designer o usa il collegamento come mostrato nella seguente schermata e accedi.

Step 2- Una volta effettuato l'accesso, avrai tutti i modelli predefiniti forniti da SAP per Theme Designer. Seleziona il tema predefinito e fai clic su Apri.

Step 3 - Inserisci il link Fiori Launchpad e il nome dell'applicazione e fai clic su Aggiungi.


Step 4- Dal lato destro del pannello dello schermo, puoi selezionare Colore, Carattere, Immagine e altre proprietà. È possibile modificare i colori come mostrato nelle schermate seguenti.


Step 5- Per salvare il tema, puoi fare clic sull'icona Salva come mostrato nella seguente schermata. Hai anche un'opzione per salvare e costruire l'opzione.

Dopo aver fatto clic su Salva e crea, inizierà il salvataggio e, una volta completato, riceverai un messaggio di conferma: Salva e crea completato.

Step 6 - Per ottenere il collegamento di questo tema personalizzato, usa il codice T come mostrato nello screenshot seguente -

Step 7 - Seleziona il tema che hai creato e fai clic sulla scheda Informazioni.

Step 8 - Usa Ctrl + Y per copiare l'URL dallo schermo e prenderne nota.

Temi supportati
Questi sono i temi predefiniti forniti con UI5 -
- Cristallo blu
- Riflessione d'oro
- Identificazione visiva mobile
- Nero ad alto contrasto

Tipi di grafici
Esistono vari tipi di grafici nella libreria di grafici sap.viz.ui5 che possono essere utilizzati per rappresentare i dati aziendali. Di seguito sono riportati alcuni tipi di grafici CVOM: Colonna, Bolla, Linea, Torta, ecc.

