Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Riferimento ai componenti

Questo argomento descrive in dettaglio ciascuno dei componenti di App Studio, le relative proprietà e include esempi di configurazione.

Proprietà comuni dei componenti

Questa sezione descrive le proprietà e le funzionalità generali condivise tra più componenti nell'Application Studio. I dettagli di implementazione specifici e i casi d'uso per ciascun tipo di proprietà possono variare a seconda del componente, ma il concetto generale di queste proprietà rimane coerente in App Studio.

Nome

Viene generato un nome predefinito per ogni componente; tuttavia, è possibile modificarlo per passare a un nome univoco per ciascun componente. Utilizzerai questo nome per fare riferimento al componente e ai relativi dati da altri componenti o espressioni all'interno della stessa pagina. Limitazione: non includere spazi nel nome del componente; può contenere solo lettere, numeri, caratteri di sottolineatura e simboli del dollaro. Esempi: userNameInput, ordersTable, metricCard1.

Valore primario, Valore secondario e Valore

Molti componenti dell'Application Studio forniscono campi per specificare valori o espressioni che determinano il contenuto o i dati visualizzati all'interno del componente. Questi campi sono spesso etichettati comePrimary value, o semplicemente Secondary valueValue, a seconda del tipo e dello scopo del componente.

Il Primary value campo viene in genere utilizzato per definire il valore principale, il punto dati o il contenuto che deve essere visualizzato in modo ben visibile all'interno del componente.

Il Secondary value campo, se disponibile, viene utilizzato per visualizzare un valore o informazioni aggiuntivi o di supporto accanto al valore principale.

Il Value campo consente di specificare il valore o l'espressione da visualizzare nel componente.

Questi campi supportano sia l'immissione di testo statico che le espressioni dinamiche. Utilizzando le espressioni, è possibile fare riferimento a dati provenienti da altri componenti, origini dati o variabili all'interno dell'applicazione, abilitando la visualizzazione dinamica e basata sui dati.

Sintassi per le espressioni

La sintassi per l'immissione di espressioni in questi campi segue uno schema coerente:

{{expression}}

expressionDov'è un'espressione valida che restituisce il valore o i dati desiderati che si desidera visualizzare.

Esempio: testo statico

Esempi: espressioni

Utilizzando questi campi di espressione, è possibile creare contenuti dinamici e basati sui dati all'interno dell'applicazione, consentendo di visualizzare informazioni personalizzate in base al contesto dell'utente o allo stato dell'applicazione. Ciò consente esperienze utente più personalizzate e interattive.

Etichetta

La proprietà Label consente di specificare una didascalia o un titolo per il componente. Questa etichetta viene in genere visualizzata accanto o sopra il componente, per aiutare gli utenti a comprenderne lo scopo.

È possibile utilizzare sia testo statico che espressioni per definire l'etichetta.

Esempio: testo statico

Se si immette il testo «Nome» nel campo Etichetta, il componente visualizzerà «Nome» come etichetta.

Esempio: espressioni

Esempio: negozio al dettaglio

L'esempio seguente personalizza l'etichetta per ogni utente, rendendo l'interfaccia più adatta all'individuo:

{{currentUser.firstName}} {{currentUser.lastName}}'s Account

Esempio: gestione dei progetti SaaS

L'esempio seguente estrae i dati dal progetto selezionato per fornire etichette specifiche del contesto, aiutando gli utenti a rimanere orientati all'interno dell'applicazione:

Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}

Esempio: clinica sanitaria

L'esempio seguente fa riferimento al profilo dell'utente corrente e alle informazioni del medico, fornendo un'esperienza più personalizzata per i pazienti.

Dr. {{ui.doctorProfileTable.data.firstName}}
       {{ui.doctorProfileTable.data.lastName}}

Placeholder

La proprietà Placeholder consente di specificare il testo di suggerimento o guida che viene visualizzato all'interno del componente quando è vuoto. Questo può aiutare gli utenti a comprendere il formato di input previsto o fornire un contesto aggiuntivo.

È possibile utilizzare sia testo statico che espressioni per definire il segnaposto.

Esempio: testo statico

Se si immette il testo Enter your name nel campo Segnaposto, il componente verrà visualizzato Enter your name come testo segnaposto.

Esempio: espressioni

Esempio: servizi finanziari

Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} accountQuesti esempi estraggono i dati dall'account selezionato per visualizzare i prompt pertinenti, rendendo l'interfaccia intuitiva per i clienti bancari.

Esempio: E-commerce

Enter the coupon code for {{ui.cartTable.data.currency}} totalIl segnaposto qui si aggiorna dinamicamente in base al contenuto del carrello dell'utente, offrendo un'esperienza di pagamento senza interruzioni.

Esempio: clinica sanitaria

Enter your {{ui.patientProfile.data.age}}-year-old patient's symptomsUtilizzando un'espressione che fa riferimento all'età del paziente, l'applicazione può creare un segnaposto più personalizzato e utile.

Origine

La proprietà Source consente di selezionare l'origine dati per un componente. Dopo la selezione, è possibile scegliere tra i seguenti tipi di origini dati:entity,expression, oautomation.

Entità

La selezione di Entità come origine dati consente di connettere il componente a un'entità o modello di dati esistente nell'applicazione. Ciò è utile quando si dispone di una struttura o di uno schema di dati ben definito che si desidera sfruttare in tutta l'applicazione.

Quando utilizzare l'origine dati dell'entità:

Selezione di un'interrogazione su un'entità

A volte, potresti voler connettere un componente a una query specifica che recupera i dati da un'entità, anziché dall'intera entità. Nell'origine dati Entity, hai la possibilità di scegliere tra le query esistenti o crearne una nuova.

Selezionando una query, puoi:

Ad esempio, se nella tua applicazione è presente un'Customersentità con campi comeName, e. Email PhoneNumber Puoi connettere un componente della tabella a questa entità e scegliere un'azione di ActiveCustomers dati predefinita che filtri i clienti in base al loro stato. Ciò consente di visualizzare solo i clienti attivi nella tabella, anziché l'intero database dei clienti.

Aggiungere parametri a un'origine dati di entità

Quando si utilizza un'entità come origine dati, è anche possibile aggiungere parametri al componente. Questi parametri possono essere utilizzati per filtrare, ordinare o trasformare i dati visualizzati nel componente.

Ad esempio, se hai un'Productsentità con campi come NameDescription,Price, eCategory. Puoi aggiungere un parametro denominato category a un componente della tabella che visualizza l'elenco dei prodotti. Quando gli utenti selezionano una categoria da un menu a discesa, la tabella si aggiorna automaticamente per mostrare solo i prodotti appartenenti alla categoria selezionata, utilizzando l'{{params.category}}espressione nell'azione dati.

Expression

Seleziona Espressione come origine dati per inserire espressioni o calcoli personalizzati per generare dinamicamente i dati per il componente. Ciò è utile quando è necessario eseguire trasformazioni, combinare dati provenienti da più fonti o generare dati in base a una logica aziendale specifica.

Quando utilizzare l'origine dati Expression:

Ad esempio, se hai un Metrics componente che deve visualizzare le entrate totali per il mese corrente, puoi utilizzare un'espressione come la seguente per calcolare e visualizzare le entrate mensili:

{{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}}

Automazione

Seleziona Automazione come origine dati per connettere il componente a un'automazione o a un flusso di lavoro esistente nell'applicazione. Ciò è utile quando i dati o le funzionalità del componente vengono generati o aggiornati come parte di un processo o flusso di lavoro specifico.

Quando utilizzare l'origine dati di automazione:

Ad esempio, se disponi di un componente stepflow che guida gli utenti nel processo di candidatura. Il componente stepflow può essere collegato a un'automazione che gestisce l'invio della domanda di lavoro, i controlli dei precedenti e la generazione delle offerte. Man mano che l'automazione procede attraverso questi passaggi, il componente stepflow può aggiornarsi dinamicamente per riflettere lo stato corrente della domanda.

Selezionando attentamente l'origine dati appropriata per ciascun componente, puoi assicurarti che l'interfaccia utente dell'applicazione sia alimentata dai dati e dalla logica corretti, offrendo un'esperienza fluida e coinvolgente per i tuoi utenti.

Visibile se

Utilizzate la proprietà Visible if per mostrare o nascondere componenti o elementi in base a condizioni o valori di dati specifici. Ciò è utile quando si desidera controllare dinamicamente la visibilità di alcune parti dell'interfaccia utente dell'applicazione.

La proprietà Visible if utilizza la seguente sintassi:

{{expression ? true : false}}

or

{{expression}}

expressionDov'è un'espressione booleana che restituisce o. true false

Se l'espressione restituisce un risultatotrue, il componente sarà visibile. Se l'espressione restituisce un risultatofalse, il componente verrà nascosto. L'espressione può fare riferimento a valori provenienti da altri componenti, origini dati o variabili all'interno dell'applicazione.

Visibile se ci sono esempi di espressioni

Esempio: mostrare o nascondere un campo di immissione della password in base a un input di posta elettronica

Immagina di avere un modulo di accesso con un campo di immissione e-mail e un campo di immissione della password. Vuoi mostrare il campo di immissione della password solo se l'utente ha inserito un indirizzo email. È possibile utilizzare la seguente espressione Visible if:

{{ui.emailInput.value !== ""}}

Questa espressione controlla se il valore del emailInput componente non è una stringa vuota. Se l'utente ha immesso un indirizzo e-mail, l'espressione restituisce e il campo di immissione della password sarà visibile. true Se il campo email è vuoto, l'espressione restituisce e il campo di false immissione della password verrà nascosto.

Esempio: visualizzazione di campi modulo aggiuntivi in base a una selezione a discesa

Supponiamo che tu abbia un modulo in cui gli utenti possono selezionare una categoria da un elenco a discesa. A seconda della categoria selezionata, desideri mostrare o nascondere campi del modulo aggiuntivi per raccogliere informazioni più specifiche.

Ad esempio, se l'utente seleziona la Products categoria, puoi utilizzare la seguente espressione per mostrare un Product Details campo aggiuntivo:

{{ui.categoryDropdown.value === "Products"}}

Se l'utente seleziona le Consulting categorie Services o, puoi utilizzare questa espressione per mostrare un set diverso di campi aggiuntivi:

{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}

Esempi: Altro

Per rendere visibile il componente se il valore del textInput1 componente non è una stringa vuota:

{{ui.textInput1.value === "" ? false : true}}

Per rendere il componente sempre visibile:

{{true}}

Per rendere visibile il componente se il valore del emailInput componente non è una stringa vuota:

{{ui.emailInput.value !== ""}}

Disabilitato se

La funzionalità Disabilitato se consente di abilitare o disabilitare condizionalmente un componente in base a condizioni o valori di dati specifici. Ciò si ottiene utilizzando la proprietà Disabled if, che accetta un'espressione booleana che determina se il componente deve essere abilitato o disabilitato.

La proprietà Disabled if utilizza la seguente sintassi:

{{expression ? true : false}}

or

{{expression}}

Esempi di espressioni if disattivate

Esempio: disabilitazione di un pulsante di invio in base alla convalida del modulo

Se disponi di un modulo con più campi di input e desideri disabilitare il pulsante di invio finché tutti i campi obbligatori non vengono compilati correttamente, puoi utilizzare la seguente espressione Disabled If:

{{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}}

Questa espressione controlla se uno dei campi di input obbligatori (nameInput,emailInput,passwordInput) è vuoto. Se uno dei campi è vuoto, l'espressione restituisce e il pulsante di invio verrà disabilitato. true Una volta compilati tutti i campi obbligatori, l'espressione restituisce e il pulsante di invio verrà abilitato. false

Utilizzando questi tipi di espressioni condizionali nelle proprietà Visible if e Disabled ff, è possibile creare interfacce utente dinamiche e reattive che si adattano all'input dell'utente, fornendo un'esperienza più snella e pertinente per gli utenti dell'applicazione.

expressionDov'è un'espressione booleana che restituisce vero o falso.

Esempio:

{{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string.
{{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid.

Layout dei contenitori

Le proprietà del layout determinano il modo in cui il contenuto o gli elementi all'interno di un componente sono disposti e posizionati. Sono disponibili diverse opzioni di layout, ciascuna rappresentata da un'icona:

Orientation (Orientamento)

Allineamento

Larghezza

La proprietà Width specifica la dimensione orizzontale del componente. È possibile immettere un valore percentuale compreso tra 0% e 100%, che rappresenta la larghezza del componente rispetto al contenitore principale o allo spazio disponibile.

Altezza

La proprietà Height specifica la dimensione verticale del componente. Il valore «auto» regola automaticamente l'altezza del componente in base al suo contenuto o allo spazio disponibile.

Spazio tra

La proprietà Space between determina la spaziatura o lo spazio tra il contenuto o gli elementi all'interno del componente. È possibile selezionare un valore da 0 px (senza spaziatura) a 64 px, con incrementi di 4 px (ad esempio, 4 px, 8 px, 12 px, ecc.).

Padding

La proprietà Padding controlla lo spazio tra il contenuto o gli elementi e i bordi del componente. È possibile selezionare un valore da 0px (senza padding) a 64px, con incrementi di 4px (ad esempio, 4px, 8px, 12px, ecc.).

Contesto

Lo sfondo abilita o disabilita un colore o uno stile di sfondo per il componente.

Queste proprietà di layout offrono flessibilità nella disposizione e nel posizionamento del contenuto all'interno di un componente, oltre a controllare le dimensioni, la spaziatura e l'aspetto visivo del componente stesso.

Componenti dati

Questa sezione descrive i vari componenti di dati disponibili nell'Application Studio, inclusi i componenti Table, Detail, Metric , Form e Repeater. Questi componenti vengono utilizzati per visualizzare, raccogliere e manipolare i dati all'interno dell'applicazione.

Tabella

Il componente Tabella visualizza i dati in formato tabulare, con righe e colonne. Viene utilizzato per presentare dati strutturati, come elenchi di elementi o record di un database, in modo organizzato e di facile lettura.

Proprietà tabella

Il componente Tabella condivide diverse proprietà comuni con altri componenti, ad esempio NameSource, e. Actions Per ulteriori informazioni su queste proprietà, vedereProprietà comuni dei componenti.

Oltre alle proprietà comuni, il componente Table presenta proprietà e opzioni di configurazione specifiche, tra cui ColumnsSearch and export, eExpressions.

Colonne

In questa sezione, è possibile definire le colonne da visualizzare nella tabella. Ogni colonna può essere configurata con le seguenti proprietà:

Cerca ed esporta

Il componente Tabella fornisce i seguenti interruttori per abilitare o disabilitare la funzionalità di ricerca ed esportazione:

Righe per pagina

È possibile specificare il numero di righe da visualizzare per pagina nella tabella. Gli utenti possono quindi navigare tra le pagine per visualizzare il set di dati completo.

Pre-fetch limite

Specifica il numero massimo di record da prerecuperare in ogni richiesta di interrogazione. Il massimo è 3000.

Azioni

Nella sezione Azioni, configura le seguenti proprietà:

Espressioni

Il componente Tabella fornisce diverse aree in cui utilizzare espressioni e funzionalità di azione a livello di riga che consentono di personalizzare e migliorare la funzionalità e l'interattività della tabella. Consentono di fare riferimento e visualizzare dinamicamente i dati all'interno della tabella. Sfruttando questi campi di espressione, è possibile creare colonne dinamiche, passare dati ad azioni a livello di riga e fare riferimento ai dati delle tabelle da altri componenti o espressioni all'interno dell'applicazione.

Esempi: riferimento ai valori delle righe

{{currentRow.columnName}}oppure {{currentRow["Column Name"]}} Queste espressioni consentono di fare riferimento al valore di una colonna specifica per la riga corrente che viene renderizzata. Sostituisci columnName o Column Name con il nome effettivo della colonna a cui vuoi fare riferimento.

Esempi:

Esempi: riferimento alla riga selezionata

{{ui.table1.selectedRow["columnName"]}}Questa espressione consente di fare riferimento al valore di una colonna specifica per la riga attualmente selezionata nella tabella con l'IDtable1. Sostituisci table1 con l'ID effettivo del componente della tabella e columnName con il nome della colonna a cui vuoi fare riferimento.

Esempi:

Esempi: creazione di colonne personalizzate

È possibile aggiungere colonne personalizzate a una tabella in base ai dati restituiti dall'azione, dall'automazione o dall'espressione dei dati sottostanti. È possibile utilizzare i valori e JavaScript le espressioni delle colonne esistenti per creare nuove colonne.

Esempi:

Esempi: personalizzazione dei valori di visualizzazione delle colonne:

È possibile personalizzare il valore di visualizzazione di un campo all'interno di una colonna della tabella impostando il Value campo della mappatura delle colonne. Ciò consente di applicare formattazioni o trasformazioni personalizzate ai dati visualizzati.

Esempi:

Row-level azioni dei pulsanti

{{currentRow.columnName}}oppure {{currentRow["Column Name"]}} puoi utilizzare queste espressioni per passare il contesto della riga di riferimento all'interno di un'azione a livello di riga, ad esempio passare a un'altra pagina con i dati della riga selezionata o attivare un'automazione con i dati della riga.

Esempi:

Sfruttando questi campi di espressione e le funzionalità di azione a livello di riga, puoi creare tabelle interattive e altamente personalizzate che visualizzano e manipolano i dati in base ai tuoi requisiti specifici. Inoltre, puoi connettere le azioni a livello di riga con altri componenti o automazioni all'interno dell'applicazione, consentendo un flusso di dati e una funzionalità senza interruzioni.

Dettaglio

Il componente Detail è progettato per visualizzare informazioni dettagliate su un record o un elemento specifico. Fornisce uno spazio dedicato per la presentazione di dati completi relativi a una singola entità o riga, rendendolo ideale per mostrare dettagli approfonditi o facilitare le attività di immissione e modifica dei dati.

Proprietà di dettaglio

Il componente Detail condivide diverse proprietà comuni con altri componentiName, ad esempioSource, eActions. Per ulteriori informazioni su queste proprietà, vedereProprietà comuni dei componenti.

Il componente Detail dispone anche di proprietà e opzioni di configurazione specificheFields, tra cuiLayout, eExpressions.

Layout

La sezione Layout consente di personalizzare la disposizione e la presentazione dei campi all'interno del componente Detail. È possibile configurare opzioni come:

Espressioni ed esempi

Il componente Detail fornisce vari campi di espressione che consentono di fare riferimento e visualizzare i dati all'interno del componente in modo dinamico. Queste espressioni consentono di creare componenti Detail personalizzati e interattivi che si connettono perfettamente ai dati e alla logica dell'applicazione.

Esempio: riferimento ai dati

{{ui.details.data[0]?.["colName"]}}: Questa espressione consente di fare riferimento al valore della colonna denominata «colName» per il primo elemento (indice 0) nell'array di dati connesso al componente Detail con l'ID «details». Sostituisci «colName» con il nome effettivo della colonna a cui vuoi fare riferimento. Ad esempio, l'espressione seguente visualizzerà il valore della colonna «customerName» per il primo elemento della matrice di dati connessa al componente «details»:

{{ui.details.data[0]?.["customerName"]}}

Esempio: rendering condizionale

{{ui.table1.selectedRow["colName"]}}: questa espressione restituisce true se la riga selezionata nella tabella con l'ID table1 contiene dati per la colonna denominatacolName. Può essere utilizzata per mostrare o nascondere in modo condizionale il componente Detail in base al fatto che la riga selezionata della tabella sia vuota o meno.

Esempio:

È possibile utilizzare questa espressione nella Visible if proprietà del componente Detail per mostrarla o nasconderla in modo condizionale in base alla riga selezionata nella tabella.

{{ui.table1.selectedRow["customerName"]}}

Se questa espressione restituisce true (la riga selezionata nel table1 componente ha un valore per la customerName colonna), il componente Detail sarà visibile. Se l'espressione restituisce false (ad esempio, la riga selezionata è vuota o non ha un valore per «customerName»), il componente Detail verrà nascosto.

Esempio: visualizzazione condizionale

{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}: Questa espressione visualizza in modo condizionale un'emoji in base al valore di un componente o di un campo di dati.

Suddivisione:

Questa espressione può essere utilizzata per visualizzare un'emoji o un valore specifico in base al valore di un componente o di un campo dati all'interno del componente Detail.

Metriche

Il componente Metrics è un elemento visivo che mostra le metriche chiave o i punti dati in un formato simile a una scheda. È progettato per fornire un modo conciso e visivamente accattivante per presentare informazioni importanti o indicatori di performance.

Proprietà delle metriche

Il componente Metrics condivide diverse proprietà comuni con altri componenti, come NameSource, e. Actions Per ulteriori informazioni su queste proprietà, vedereProprietà comuni dei componenti.

Tendenza

La funzione di tendenza di Metrics consente di visualizzare un indicatore visivo del rendimento o delle modifiche nel tempo della metrica visualizzata.

Valore di tendenza

Questo campo consente di specificare il valore o l'espressione da utilizzare per determinare la direzione e l'ampiezza del trend. In genere, si tratta di un valore che rappresenta la variazione o la performance in un periodo di tempo specifico.

Esempio:

{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}

Questa espressione recupera il valore delle entrate mensili dal primo elemento dei dati collegati alle metriche «SalesMetrics».

Tendenza positiva

Questo campo consente di inserire un'espressione che definisce la condizione per un trend positivo. L'espressione deve essere valutata come vera o falsa.

Esempio:

{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}

Questa espressione verifica se il valore delle entrate mensili è maggiore di 0, indicando una tendenza positiva.

Tendenza negativa

Questo campo consente di inserire un'espressione che definisce la condizione per un trend negativo. L'espressione deve essere valutata come vera o falsa.

Esempio:

{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}

Questa espressione verifica se il valore delle entrate mensili è inferiore a 0, indicando una tendenza negativa.

Barra dei colori

Questo interruttore consente di attivare o disattivare la visualizzazione di una barra colorata per indicare visivamente lo stato del trend.

Esempi di barre colorate:

Esempio: andamento delle metriche di vendita

Esempio: andamento delle metriche di inventario

Esempio: tendenza alla soddisfazione dei clienti

Configurando queste proprietà relative alle tendenze, puoi creare componenti Metrics che forniscono una rappresentazione visiva delle prestazioni o delle modifiche nel tempo della metrica visualizzata.

Sfruttando queste espressioni, è possibile creare componenti metrici altamente personalizzati e interattivi che fanno riferimento e visualizzano i dati in modo dinamico, consentendo di mostrare le metriche chiave, gli indicatori di prestazioni e le visualizzazioni basate sui dati all'interno dell'applicazione.

Esempi di espressioni relative alle metriche

Nel pannello delle proprietà, puoi inserire espressioni per visualizzare il titolo, il valore principale, il valore secondario e la didascalia del valore per visualizzare dinamicamente un valore.

Esempio: riferimento al valore primario

{{ui.metric1.primaryValue}}: Questa espressione consente di fare riferimento al valore principale del componente Metrics con l'ID metric1 di altri componenti o espressioni all'interno della stessa pagina.

Esempio: {{ui.salesMetrics.primaryValue}} visualizzerà il valore principale del componente salesMetrics Metrics.

Esempio: riferimento al valore secondario

{{ui.metric1.secondaryValue}}: Questa espressione consente di fare riferimento al valore secondario del componente Metrics con l'ID metric1 di altri componenti o espressioni all'interno della stessa pagina.

Esempio: {{ui.revenueMetrics.secondaryValue}} visualizzerà il valore secondario del componente revenueMetrics Metrics.

Esempio: riferimento ai dati

{{ui.metric1.data}}: Questa espressione consente di fare riferimento ai dati del componente Metrics con l'ID metric1 di altri componenti o espressioni all'interno della stessa pagina.

Esempio: {{ui.kpiMetrics.data}} farà riferimento ai dati connessi al componente kpiMetrics Metrics.

Esempio: visualizzazione di valori di dati specifici:

{{ui.metric1.data?.[0]?.id}}: Questa espressione è un esempio di come visualizzare un'informazione specifica dai dati connessi al componente Metrics con l'IDmetric1. È utile quando si desidera visualizzare una proprietà specifica del primo elemento nei dati.

Suddivisione:

Esempio: {{ui.orderMetrics.data?.[0]?.orderId}} visualizzerà il orderId valore del primo elemento nei dati connessi al componente orderMetrics Metrics.

Esempio: visualizzazione della lunghezza dei dati

{{ui.metric1.data?.length}}: Questa espressione dimostra come visualizzare la lunghezza (numero di elementi) nei dati connessi al componente Metrics con l'ID. metric1 È utile quando si desidera visualizzare il numero di elementi nei dati.

Ripartizione:

Esempio: {{ui.productMetrics.data?.length}} visualizzerà il numero di elementi nei dati connessi al componente productMetrics Metrics.

Ripetitore

Il componente Repeater è un componente dinamico che consente di generare e visualizzare una raccolta di elementi in base a un'origine dati fornita. È progettato per facilitare la creazione di elenchi, griglie o schemi ripetuti all'interno dell'interfaccia utente dell'applicazione. Alcuni esempi di casi d'uso includono:

Il componente Repeater si differenzia dal componente Table per i suoi contenuti ricchi. Un componente Table ha un formato rigoroso di riga e colonna. Il ripetitore può visualizzare i dati in modo più flessibile.

Proprietà del ripetitore

Il componente Repeater condivide diverse proprietà comuni con altri componenti, ad esempio NameSource, e. Actions Per ulteriori informazioni su queste proprietà, vedereProprietà comuni dei componenti.

Oltre alle proprietà comuni, il componente Repeater presenta le seguenti proprietà aggiuntive e opzioni di configurazione.

Modello di articolo

Il modello Item è un contenitore in cui è possibile definire la struttura e i componenti che verranno ripetuti per ogni elemento nell'origine dati. Puoi trascinare e rilasciare altri componenti in questo contenitore, come Text, Image , Button o qualsiasi altro componente necessario per rappresentare ogni elemento.

All'interno del modello Item, puoi fare riferimento a proprietà o valori dell'elemento corrente utilizzando le espressioni nel formato{{currentItem.propertyName}}.

Ad esempio, se l'origine dati contiene una itemName proprietà, è possibile {{currentItem.itemName}} utilizzarla per visualizzare i nomi degli elementi dell'elemento corrente.

Layout

La sezione Layout consente di configurare la disposizione degli elementi ripetuti all'interno del componente Repeater.

Orientation (Orientamento)

Righe per pagina

Specifica il numero di righe da visualizzare per pagina nel layout dell'elenco. L'impaginazione è prevista per gli elementi che superano il numero di righe specificato.

Colonne e righe per pagina (griglia)

Espressioni ed esempi

Il componente Repeater fornisce vari campi di espressione che consentono di fare riferimento e visualizzare i dati all'interno del componente in modo dinamico. Queste espressioni consentono di creare componenti Repeater personalizzati e interattivi che si connettono perfettamente ai dati e alla logica dell'applicazione.

Esempio: riferimento agli elementi

Esempio: visualizzazione di un elenco di prodotti

Esempio: generazione di una griglia di avatar utente

Utilizzando il Repeater componente, è possibile creare interfacce utente dinamiche e basate sui dati, semplificando il processo di rendering di raccolte di elementi e riducendo la necessità di ripetizioni manuali o codifica rigida.

Modulo

Il componente Form è progettato per acquisire gli input degli utenti e facilitare le attività di immissione dei dati all'interno dell'applicazione. Fornisce un layout strutturato per la visualizzazione di campi di input, menu a discesa, caselle di controllo e altri controlli del modulo, consentendo agli utenti di inserire o modificare i dati senza problemi. È possibile annidare altri componenti all'interno di un componente del modulo, ad esempio una tabella.

Proprietà del modulo

Il componente Form condivide diverse proprietà comuni con altri componenti, ad esempio NameSource, eActions. Per ulteriori informazioni su queste proprietà, vedereProprietà comuni dei componenti.

Genera modulo

La funzione Genera modulo semplifica la creazione rapida dei campi del modulo compilandoli automaticamente in base a un'origine dati selezionata. Ciò consente di risparmiare tempo e fatica nella creazione di moduli che devono visualizzare un numero elevato di campi.

La funzione Genera modulo è particolarmente utile quando nell'applicazione è presente un modello di dati ben definito o un set di entità per il quale è necessario acquisire l'input dell'utente. Generando automaticamente i campi del modulo, puoi risparmiare tempo e garantire la coerenza tra i moduli della tua domanda.

Dopo aver utilizzato la funzione Genera modulo, puoi personalizzare ulteriormente il layout, le azioni e le espressioni del componente Modulo in base ai tuoi requisiti specifici.

Espressioni ed esempi

Come altri componenti, è possibile utilizzare le espressioni per fare riferimento e visualizzare i dati all'interno del componente Form. Ad esempio:

Configurando queste proprietà e sfruttando le espressioni, puoi creare componenti Form personalizzati e interattivi che si integrano perfettamente con le origini dati e la logica dell'applicazione. Questi componenti possono essere utilizzati per acquisire l'input dell'utente, visualizzare dati precompilati e attivare azioni in base all'invio del modulo o alle interazioni dell'utente.

Stepflow

Il componente Stepflow è progettato per guidare gli utenti attraverso processi o flussi di lavoro in più fasi all'interno dell'applicazione. Fornisce un'interfaccia strutturata e intuitiva per presentare una sequenza di passaggi, ognuno con il proprio set di input, convalide e azioni.

Il componente Stepflow condivide diverse proprietà comuni con altri componenti, comeName, Source e. Actions Per ulteriori informazioni su queste proprietà, vedereProprietà comuni dei componenti.

Il componente Stepflow ha proprietà e opzioni di configurazione aggiuntive, come Step NavigationValidation, eExpressions.

Componenti AI

Generazione AI

Il componente Gen AI è un contenitore di raggruppamento che viene utilizzato per raggruppare i componenti e la relativa logica per modificarli facilmente con l'intelligenza artificiale utilizzando la chat all'interno dello studio applicativo. Quando usi la chat per creare componenti, questi verranno raggruppati in un contenitore Gen AI. Per informazioni sulla modifica o sull'utilizzo di questo componente, consultaCreazione o modifica della tua app.

Componenti & numerici di testo

Inserimento di testo

Il componente di immissione di testo consente agli utenti di inserire e inviare dati di testo all'interno dell'applicazione. Fornisce un modo semplice e intuitivo per acquisire gli input degli utenti, come nomi, indirizzi o qualsiasi altra informazione testuale.

Testo

Il componente Testo viene utilizzato per visualizzare informazioni testuali all'interno dell'applicazione. Può essere utilizzato per mostrare testo statico, valori dinamici o contenuti generati da espressioni.

Area di testo

Il componente Area di testo è progettato per acquisire input di testo su più righe da parte degli utenti. Fornisce un'area del campo di immissione più ampia in cui gli utenti possono inserire voci di testo più lunghe, come descrizioni, note o commenti.

Email

Il componente Email è un campo di input specializzato progettato per acquisire gli indirizzi e-mail degli utenti. Può applicare regole di convalida specifiche per garantire che il valore inserito aderisca al formato e-mail corretto.

Password

Il componente Password è un campo di immissione progettato specificamente per consentire agli utenti di immettere informazioni sensibili, come password o codici PIN. Maschera i caratteri inseriti per mantenere la privacy e la sicurezza.

Cerca

Il componente Search fornisce agli utenti un campo di input dedicato per eseguire query di ricerca o inserire termini di ricerca all'interno dei dati popolati all'interno dell'applicazione.

Telefono

Il componente Telefono è un campo di input personalizzato per acquisire numeri di telefono o altre informazioni di contatto degli utenti. Può includere regole di convalida e opzioni di formattazione specifiche per garantire che il valore immesso aderisca al formato corretto del numero di telefono.

Numero

Il componente Number è un campo di input progettato specificamente per consentire agli utenti di immettere valori numerici. Può applicare regole di convalida per garantire che il valore immesso sia un numero valido all'interno di un intervallo o formato specificato.

Valuta

Il componente Valuta è un campo di input specializzato per l'acquisizione di valori o importi monetari. Può includere opzioni di formattazione per visualizzare simboli di valuta, separatori decimali e applicare regole di convalida specifiche per gli input di valuta.

Coppia di dettagli

Il componente Detail pair viene utilizzato per visualizzare coppie chiave-valore o coppie di informazioni correlate in un formato strutturato e leggibile. Viene comunemente utilizzato per presentare dettagli o metadati associati a un elemento o un'entità specifici.

Componenti di selezione

Effettua lo switch

Il componente Switch è un controllo dell'interfaccia utente che consente agli utenti di alternare tra due stati o opzioni, ad esempio on/off true/false, o. enabled/disabled Fornisce una rappresentazione visiva dello stato corrente e consente agli utenti di modificarlo con un solo clic o tocco.

Cambia gruppo

Il componente Switch group è un insieme di controlli switch individuali che consentono agli utenti di selezionare una o più opzioni da un set predefinito. Fornisce una rappresentazione visiva delle opzioni selezionate e non selezionate, facilitando agli utenti la comprensione e l'interazione con le scelte disponibili.

Cambia i campi delle espressioni di gruppo

Gruppo di caselle di controllo

Il componente del gruppo Checkbox presenta agli utenti un gruppo di caselle di controllo, che consentono loro di selezionare più opzioni contemporaneamente. È utile quando si desidera fornire agli utenti la possibilità di scegliere uno o più elementi da un elenco di opzioni.

Casella di controllo, raggruppa, campi di espressione

Gruppo radiofonico

Il componente del gruppo Radio è un insieme di pulsanti di opzione che consentono agli utenti di selezionare una singola opzione tra più scelte che si escludono a vicenda. Assicura che sia possibile selezionare una sola opzione alla volta, fornendo agli utenti un modo chiaro e inequivocabile di effettuare una selezione.

Campi di espressione dei gruppi radio

I seguenti campi possono essere utilizzati nelle espressioni.

Selezione singola

Il componente Selezione singola presenta agli utenti un elenco di opzioni, da cui possono selezionare un singolo elemento. Viene comunemente utilizzato in scenari in cui gli utenti devono effettuare una scelta tra un insieme predefinito di opzioni, ad esempio la selezione di una categoria, una posizione o una preferenza.

Campi di espressione a selezione singola

Selezione multipla

Il componente Selezione multipla è simile al componente a selezione singola ma consente agli utenti di selezionare più opzioni contemporaneamente da un elenco di scelte. È utile quando gli utenti devono effettuare selezioni multiple da un insieme predefinito di opzioni, ad esempio selezionare più tag, interessi o preferenze.

Campi di espressione a selezione multipla

Pulsanti, componenti & di navigazione

L'Application Studio fornisce una varietà di pulsanti e componenti di navigazione per consentire agli utenti di attivare azioni e navigare all'interno dell'applicazione.

Componenti dei pulsanti

I componenti dei pulsanti disponibili sono:

Questi componenti del pulsante condividono le seguenti proprietà comuni:

Contenuti

Tipo

Dimensione

La dimensione del pulsante. I valori possibili sono Small, Medium e Large.

Icon

È possibile scegliere tra una varietà di icone da visualizzare sul pulsante, tra cui:

Triggers

Quando si fa clic sul pulsante, è possibile configurare una o più azioni da attivare. I tipi di azione disponibili sono:

JavaScript proprietà del pulsante di azione

Seleziona il tipo di JavaScript azione per eseguire il JavaScript codice personalizzato quando si fa clic sul pulsante.

Codice sorgente

Nel Source code campo, puoi inserire la tua JavaScript espressione o funzione. Ad esempio:

return "Hello World";

Ciò restituirà semplicemente la stringa Hello World quando si fa clic sul pulsante.

Condizione: Esegui se

È inoltre possibile fornire un'espressione booleana che determina se l' JavaScript azione deve essere eseguita o meno. Questo utilizza la sintassi seguente:

{{ui.textinput1.value !== ""}}

In questo esempio, l' JavaScript azione verrà eseguita solo se il valore del textinput1 componente non è una stringa vuota.

Utilizzando queste opzioni di attivazione avanzate, è possibile creare comportamenti dei pulsanti altamente personalizzati che si integrano direttamente con la logica e i dati dell'applicazione. Ciò consente di estendere la funzionalità integrata dei pulsanti e personalizzare l'esperienza utente in base ai requisiti specifici.

Collegamento ipertestuale

Il componente Hyperlink fornisce un collegamento cliccabile per accedere a URL esterni o percorsi interni dell'applicazione.

Proprietà del collegamento ipertestuale

Contenuti

URL

L'URL di destinazione del collegamento ipertestuale, che può essere un sito Web esterno o un percorso interno dell'applicazione.

Triggers

Quando si fa clic sul collegamento ipertestuale, è possibile configurare una o più azioni da attivare. I tipi di azione disponibili sono gli stessi dei componenti dei pulsanti.

Componenti & data/ora

Data

Il componente Data consente agli utenti di selezionare e inserire le date.

Il componente Date condivide diverse proprietà comuni con altri componenti, comeName,Source, eValidation. Per ulteriori informazioni su queste proprietà, vedereProprietà comuni dei componenti.

Oltre alle proprietà comuni, il componente Date presenta le seguenti proprietà specifiche:

Proprietà della data

Formato

Valore

Data minima

Data massima

Tipo di calendario

Date disabilitate

Comportamento

Convalida

La sezione Convalida consente di definire regole e vincoli aggiuntivi per l'immissione della data. Configurando queste regole di convalida, puoi assicurarti che i valori di data inseriti dagli utenti soddisfino i requisiti specifici della tua applicazione. Puoi aggiungere i seguenti tipi di convalide:

Configurando queste regole di convalida, puoi assicurarti che i valori di data inseriti dagli utenti soddisfino i requisiti specifici della tua applicazione.

Espressioni ed esempi

Il componente Date fornisce il seguente campo di espressione:

Orario

Il componente Time consente agli utenti di selezionare e inserire valori temporali. Configurando le varie proprietà del componente Time, è possibile creare campi di immissione dell'ora che soddisfano i requisiti specifici dell'applicazione, ad esempio la limitazione dell'intervallo di tempo selezionabile, la disabilitazione di determinati orari e il controllo della visibilità e dell'interattività del componente.

Proprietà temporali

Il componente Time condivide diverse proprietà comuni con altri componenti, ad esempio NameSource, eValidation. Per ulteriori informazioni su queste proprietà, vedereProprietà comuni dei componenti.

Oltre alle proprietà comuni, il componente Time ha le seguenti proprietà specifiche:

Intervalli di tempo

Valore

Placeholder

Tempo minimo

Tempo massimo

Orari di disabilitazione

Configurazione degli orari disabilitati

È possibile utilizzare la sezione Orari disabilitati per specificare quali valori temporali non devono essere selezionati.

Origine

Esempio di espressione:

{{currentRow.column === "Lunch Break"}}

Questa espressione disattiverebbe tutte le volte in cui la colonna «Pausa pranzo» è vera per la riga corrente.

Configurando queste regole di convalida e disattivando le espressioni temporali, puoi assicurarti che i valori temporali inseriti dagli utenti soddisfino i requisiti specifici della tua applicazione.

Comportamento

Convalida

Ad esempio:

{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}

Questa espressione controlla se l'ora inserita è alle 9:00 o alle 9:30. Se la condizione è vera, la convalida avrà esito negativo.

Puoi anche fornire un messaggio di convalida personalizzato da visualizzare quando la convalida non viene soddisfatta:

Validation not met. The time must be 9:00 AM or 9:30 AM.

Espressioni ed esempi

Il componente Time fornisce il seguente campo di espressione:

Esempio: valore temporale

Esempio: confronto temporale

Intervallo di date

Il componente Intervallo di date consente agli utenti di selezionare e inserire un intervallo di date. Configurando le varie proprietà del componente Intervallo di date, è possibile creare campi di immissione dell'intervallo di date che soddisfano i requisiti specifici dell'applicazione, ad esempio la limitazione dell'intervallo di date selezionabile, la disabilitazione di determinate date e il controllo della visibilità e dell'interattività del componente.

Proprietà dell'intervallo di date

Il componente Intervallo di date condivide diverse proprietà comuni con altri componenti, comeName,Source, eValidation. Per ulteriori informazioni su queste proprietà, vedereProprietà comuni dei componenti.

Oltre alle proprietà comuni, il componente Date Range ha le seguenti proprietà specifiche:

Formato

Data di inizio

Data di fine

Placeholder

Data minima

Data massima

Tipo di calendario

Giorni obbligatori selezionati

Date disabilitate

Convalida

La sezione Convalida consente di definire regole e vincoli aggiuntivi per l'input dell'intervallo di date.

Espressioni ed esempi

Il componente Date Range fornisce i seguenti campi di espressione:

Esempio: calcolo della differenza di data

Esempio: visibilità condizionale basata sull'intervallo di date

Esempio: date disattivate in base ai dati della riga corrente

Convalida personalizzata

Componenti multimediali

L'Application Studio fornisce diversi componenti per incorporare e visualizzare vari tipi di file multimediali all'interno dell'applicazione.

Incorporamento iFrame

Il componente iFrame embed consente di incorporare contenuti o applicazioni Web esterni all'interno dell'applicazione utilizzando un iFrame.

Proprietà di incorporamento iFrame

URL

L'URL del contenuto o dell'applicazione esterni che desideri incorporare.

Layout

Caricamento S3

Il componente di caricamento S3 consente agli utenti di caricare file in un bucket Amazon S3. Configurando il componente S3 Upload, puoi consentire agli utenti di caricare facilmente i file nello storage Amazon S3 della tua applicazione e quindi sfruttare le informazioni sui file caricati all'interno della logica e dell'interfaccia utente dell'applicazione.

Proprietà di caricamento S3

Configurazione S3

Configurazione del caricamento dei file

Convalida

Triggers

Campi di espressione di caricamento S3

Il componente di caricamento S3 fornisce i seguenti campi di espressione:

Espressioni ed esempi

Esempio: accesso ai file caricati

Esempio: convalida dei caricamenti di file

Esempio: attivazione di azioni

Queste espressioni consentono di accedere ai file caricati, convalidare i file caricati e attivare azioni in base ai risultati del caricamento dei file. Utilizzando queste espressioni, puoi creare un comportamento più dinamico e intelligente all'interno della funzionalità di caricamento dei file dell'applicazione.

Componente di visualizzazione PDF

Il componente PDF viewer consente agli utenti di visualizzare e interagire con i documenti PDF all'interno dell'applicazione. App Studio supporta questi diversi tipi di input per il PDF Source, il componente PDF viewer offre flessibilità nel modo in cui è possibile integrare i documenti PDF nell'applicazione, che si tratti di un URL statico, di un URI di dati in linea o di contenuti generati dinamicamente.

Proprietà del visualizzatore PDF

Origine

L'origine del documento PDF, che può essere un'espressione, un'entità, un URL o un'automazione.

Expression

Usa un'espressione per generare dinamicamente il sorgente PDF.

Entità

Connetti il componente di visualizzazione PDF a un'entità di dati che contiene il documento PDF.

URL

Specifica l'URL del documento PDF.

URL

Puoi inserire un URL che punti al documento PDF che desideri visualizzare. Potrebbe essere un URL Web pubblico o un URL all'interno della tua applicazione.

Ad esempio: https://example.com/document.pdf

URI dei dati

Un Data URI è un modo compatto per includere file di dati di piccole dimensioni (come immagini o PDF) in linea all'interno dell'applicazione. Il documento PDF è codificato come stringa base64 e incluso direttamente nella configurazione del componente.

Blob o ArrayBuffer

È inoltre possibile fornire il documento PDF come Blob o ArrayBuffer oggetto, il che consente di generare o recuperare dinamicamente i dati PDF da varie fonti all'interno dell'applicazione.

Automazione

Collegate il componente di visualizzazione PDF a un'automazione che fornisce il documento PDF.

Azioni

Layout

Visualizzatore di immagini

Il componente Image Viewer consente agli utenti di visualizzare e interagire con i file di immagine all'interno dell'applicazione.

Proprietà del visualizzatore di immagini

Origine

Testo alternativo

La descrizione testuale alternativa dell'immagine, utilizzata per scopi di accessibilità.

Layout