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à.
# Utilizzo JavaScript per scrivere espressioni in App Studio
In AWS App Studio, puoi usare JavaScript le espressioni per controllare dinamicamente il comportamento e l'aspetto delle tue applicazioni. Le JavaScript espressioni a riga singola sono scritte tra parentesi graffe doppie e possono essere utilizzate in vari contesti come automazioni, componenti dell'interfaccia utente e query di dati. `{{ }}` Queste espressioni vengono valutate in fase di esecuzione e possono essere utilizzate per eseguire calcoli, manipolare dati e controllare la logica delle applicazioni.
App Studio fornisce supporto nativo per tre librerie JavaScript open source: Luxon, UUID, Lodash e integrazioni SDK per rilevare errori di JavaScript sintassi e controllo dei tipi all'interno delle configurazioni dell'app.
**Importante**
App Studio non supporta l'utilizzo di librerie personalizzate o di terze parti. JavaScript
## Sintassi di base
JavaScript le espressioni possono includere variabili, valori letterali, operatori e chiamate di funzioni. Le espressioni vengono comunemente utilizzate per eseguire calcoli o valutare condizioni.
Fare riferimento agli esempi riportati di seguito:
+ `{{ 2 + 3 }}`valuterà fino a 5.
+ `{{ "Hello, " + "World!" }}`valuterà «Hello, World\$1».
+ `{{ Math.max(5, 10) }}`valuterà fino a 10.
+ `{{ Math.random() * 10 }}`restituisce un numero casuale (con decimali) compreso tra [0-10).
## Interpolazione
È inoltre possibile utilizzarla JavaScript per interpolare valori dinamici all'interno di testo statico. Ciò si ottiene racchiudendo l' JavaScript espressione tra parentesi doppie arricciate, come nell'esempio seguente:
```
Hello {{ currentUser.firstName }}, welcome to App Studio!
```
In questo esempio, `currentUser.firstName` è un' JavaScript espressione che recupera il nome dell'utente corrente, che viene quindi inserito dinamicamente nel messaggio di saluto.
## Concatenazione
È possibile concatenare stringhe e variabili utilizzando l'`+`operatore in, come nell' JavaScriptesempio seguente.
```
{{ currentRow.FirstName + " " + currentRow.LastName }}
```
Questa espressione combina i valori di `currentRow.FirstName` e `currentRow.LastName` con uno spazio intermedio, ottenendo il nome completo della riga corrente. Ad esempio, se `currentRow.FirstName` è `John` ed `currentRow.LastName` è`Doe`, l'espressione si risolverà in`John Doe`.
## Data e ora
JavaScript fornisce varie funzioni e oggetti per lavorare con date e ore. Esempio:
+ `{{ new Date().toLocaleDateString() }}`: restituisce la data corrente in un formato localizzato.
+ `{{ DateTime.now().toISODate() }}`: restituisce la data corrente in YYYY-MM-DD formato, da utilizzare nel componente Date.
### Confronto tra data e ora
Utilizza operatori come`=`,, `>` `<``>=`, o `<=` per confrontare i valori di data e ora. Esempio:
+ `{{ui.timeInput.value > "10:00 AM"}}`: Verifica se l'ora è successiva alle 10:00.
+ `{{ui.timeInput.value <= "5:00 PM"}}`: Controlla se l'ora è alle 17:00 o prima.
+ `{{ui.timeInput.value > DateTime.now().toISOTime()}}`: Verifica se l'ora è successiva all'ora corrente.
+ `{{ui.dateInput.value > DateTime.now().toISODate()}}`: Verifica se la data è precedente alla data corrente.
+ `{{ DateTime.fromISO(ui.dateInput.value).diff(DateTime.now(), "days").days >= 5 }}`: Verifica se la data è ad almeno 5 giorni dalla data corrente.
## Blocchi di codice
Oltre alle espressioni, puoi anche scrivere blocchi di JavaScript codice multilinea. A differenza delle espressioni, i blocchi di codice non richiedono parentesi graffe. Puoi invece scrivere il JavaScript codice direttamente all'interno dell'editor di blocchi di codice.
**Nota**
Mentre le espressioni vengono valutate e i relativi valori vengono visualizzati, vengono eseguiti blocchi di codice e viene visualizzato il relativo output (se presente).
## Variabili e funzioni globali
App Studio fornisce l'accesso a determinate variabili e funzioni globali che possono essere utilizzate all'interno JavaScript delle espressioni e dei blocchi di codice. Ad esempio, `currentUser` è una variabile globale che rappresenta l'utente attualmente connesso e puoi accedere a proprietà come `currentUser.role` recuperare il ruolo dell'utente.
## Riferimento o aggiornamento dei valori dei componenti dell'interfaccia utente
È possibile utilizzare le espressioni nei componenti e nelle azioni di automazione per fare riferimento e aggiornare i valori dei componenti dell'interfaccia utente. Facendo riferimento e aggiornando a livello di codice i valori dei componenti, è possibile creare interfacce utente dinamiche e interattive che rispondono all'input dell'utente e alle modifiche dei dati.
### Riferimento ai valori dei componenti dell'interfaccia utente
È possibile creare applicazioni interattive e basate sui dati implementando un comportamento dinamico accedendo ai valori dei componenti dell'interfaccia utente.
È possibile accedere ai valori e alle proprietà dei componenti dell'interfaccia utente sulla stessa pagina utilizzando lo `ui` spazio dei nomi nelle espressioni. Facendo riferimento al nome di un componente, è possibile recuperarne il valore o eseguire operazioni in base al suo stato.
**Nota**
Il `ui` namespace mostrerà solo i componenti nella pagina corrente, poiché i componenti sono limitati alle rispettive pagine.
La sintassi di base per fare riferimento ai componenti in un'app App Studio è:. `{{ui.componentName}}`
Il seguente elenco contiene esempi di utilizzo dello spazio dei `ui` nomi per accedere ai valori dei componenti dell'interfaccia utente:
+ `{{ui.textInputName.value}}`: rappresenta il valore di un componente di input di testo denominato. *textInputName*
+ `{{ui.formName.isValid}}`: Controlla se tutti i campi del modulo denominato *formName* sono validi in base ai criteri di convalida forniti.
+ `{{ui.tableName.currentRow.columnName}}`: rappresenta il valore di una colonna specifica nella riga corrente di un componente della tabella denominato*tableName*.
+ `{{ui.tableName.selectedRowData.fieldName}}`: Rappresenta il valore del campo specificato dalla riga selezionata in un componente di tabella denominato*tableName*. È quindi possibile aggiungere un nome di campo come `ID` (`{{ui.tableName.selectedRowData.ID}}`) per fare riferimento al valore di quel campo dalla riga selezionata.
L'elenco seguente contiene esempi più specifici di riferimento ai valori dei componenti:
+ `{{ui.inputText1.value.trim().length > 0}}`: Controlla se il valore del *inputText1* componente, dopo aver tagliato qualsiasi spazio bianco iniziale o finale, ha una stringa non vuota. Questo può essere utile per convalidare l'input dell'utente o enabling/disabling altri componenti in base al valore del campo di testo di input.
+ `{{ui.multiSelect1.value.join(", ")}}`: Per un componente a selezione multipla denominato*multiSelect1*, questa espressione converte la matrice di valori delle opzioni selezionate in una stringa separata da virgole. Ciò può essere utile per visualizzare le opzioni selezionate in un formato intuitivo o per passare le selezioni a un altro componente o automazione.
+ `{{ui.multiSelect1.value.includes("option1")}}`: Questa espressione controlla se il valore *option1* è incluso nella matrice di opzioni selezionate per il *multiSelect1* componente. Restituisce vero se *option1* è selezionato e falso in caso contrario. Ciò può essere utile per eseguire il rendering condizionale dei componenti o eseguire azioni basate su selezioni di opzioni specifiche.
+ `{{ui.s3Upload1.files.length > 0}}`: per un componente di caricamento di file di Amazon S3 denominato*s3Upload1*, questa espressione verifica se sono stati caricati dei file controllando la lunghezza dell'array di file. Può essere utile per enabling/disabling altri componenti o azioni a seconda che i file siano stati caricati.
+ `{{ui.s3Upload1.files.filter(file => file.type === "image/png").length}}`: Questa espressione filtra l'elenco dei file caricati nel *s3Upload1* componente per includere solo i file di immagine PNG e restituisce il conteggio di tali file. Ciò può essere utile per convalidare o visualizzare informazioni sui tipi di file caricati.
### Aggiornamento dei valori dei componenti dell'interfaccia utente
Per aggiornare o manipolare il valore di un componente, utilizzalo all'`RunComponentAction`interno di un'automazione. Ecco un esempio della sintassi che puoi usare per aggiornare il valore di un componente di immissione di testo denominato *myInput* utilizzando l'azione`RunComponentAction`:
```
RunComponentAction(ui.myInput, "setValue", "New Value")
```
In questo esempio, il `RunComponentAction` passaggio richiama l'`setValue`azione sul *myInput* componente, passando il nuovo valore,*New Value*.
## Lavorare con i dati delle tabelle
È possibile accedere ai dati e ai valori della tabella per eseguire operazioni. È possibile utilizzare le seguenti espressioni per accedere ai dati della tabella:
+ `currentRow`: utilizzato per accedere ai dati della tabella dalla riga corrente all'interno della tabella. Ad esempio, impostare il nome di un'azione della tabella, inviare un valore dalla riga a un'automazione avviata da un'azione o utilizzare i valori delle colonne esistenti in una tabella per creare una nuova colonna.
+ `ui.tableName.selectedRow`e `ui.tableName.selectedRowData` vengono entrambi utilizzati per accedere ai dati della tabella da altri componenti della pagina. Ad esempio, impostando il nome di un pulsante all'esterno della tabella in base alla riga selezionata. I valori restituiti sono gli stessi, ma le differenze tra `selectedRow` e `selectedRowData` sono le seguenti:
+ `selectedRow`: questo namespace include il nome mostrato nell'intestazione della colonna per ogni campo. È consigliabile utilizzarlo `selectedRow` quando si fa riferimento a un valore da una colonna visibile nella tabella. Ad esempio, se nella tabella è presente una colonna personalizzata o calcolata che non esiste come campo nell'entità.
+ `selectedRowData`: questo spazio dei nomi include i campi dell'entità utilizzata come origine per la tabella. Dovresti `selectedRowData` utilizzarlo per fare riferimento a un valore dell'entità che non è visibile nella tabella, ma è utile per altri componenti o automazioni dell'app.
L'elenco seguente contiene esempi di accesso ai dati della tabella nelle espressioni:
+ `{{ui.tableName.selectedRow.columnNameWithNoSpace}}`: restituisce il valore della *columnNameWithNoSpace* colonna dalla riga selezionata nella tabella.
+ `{{ui.tableName.selectedRow.['Column Name With Space']}}`: restituisce il valore della *Column Name With Space* colonna dalla riga selezionata nella tabella.
+ `{{ui.tableName.selectedRowData.fieldName}}`: restituisce il valore del campo dell'*fieldName*entità dalla riga selezionata nella tabella.
+ `{{ui.tableName.selectedRows[0].columnMappingName}}`: fa riferimento al nome della colonna della riga selezionata da altri componenti o espressioni nella stessa pagina.
+ `{{currentRow.firstName + ' ' + currentRow.lastNamecolumnMapping}}`: concatena i valori da più colonne per creare una nuova colonna in una tabella.
+ `{{ { "Blocked": "🔴", "Delayed": "🟡", "On track": "🟢" }[currentRow.statuscolumnMapping] + " " + currentRow.statuscolumnMapping}}`: Personalizza il valore di visualizzazione di un campo all'interno di una tabella in base al valore di stato memorizzato.
+ `{{currentRow.colName}}`, `{{currentRow["First Name"]}}``{{currentRow}}`, o`{{ui.tableName.selectedRows[0]}}`: Passa il contesto della riga di riferimento all'interno di un'azione di riga.
## Accesso alle automazioni
Puoi utilizzare le automazioni per eseguire la logica e le operazioni lato server in App Studio. All'interno delle azioni di automazione, puoi utilizzare le espressioni per elaborare dati, generare valori dinamici e incorporare risultati di azioni precedenti.
### Accesso ai parametri di automazione
Puoi passare valori dinamici dai componenti dell'interfaccia utente e da altre automazioni alle automazioni, rendendole riutilizzabili e flessibili. Questa operazione viene eseguita utilizzando i parametri di automazione con lo spazio dei `params` nomi nel modo seguente:
`{{params.parameterName}}`: fa riferimento a un valore passato all'automazione da un componente dell'interfaccia utente o da un'altra fonte. Ad esempio, `{{params.ID}}` farebbe riferimento a un parametro denominato*ID*.
#### Manipolazione dei parametri di automazione
È possibile utilizzare JavaScript per manipolare i parametri di automazione. Fare riferimento agli esempi riportati di seguito:
+ `{{params.firstName}} {{params.lastName}}`: concatena i valori passati come parametri.
+ `{{params.numberParam1 + params.numberParam2}}`: aggiunge due parametri numerici.
+ `{{params.valueProvided?.length > 0 ? params.valueProvided : 'Default'}}`: Controlla se un parametro non è nullo o non definito e ha una lunghezza diversa da zero. Se vero, usa il valore fornito; in caso contrario, imposta un valore predefinito.
+ `{{params.rootCause || "No root cause provided"}}`: se il `params.rootCause` parametro è falso (null, undefined o una stringa vuota), utilizza il valore predefinito fornito.
+ `{{Math.min(params.numberOfProducts, 100)}}`: limita il valore di un parametro a un valore massimo (in questo caso,`100`).
+ `{{ DateTime.fromISO(params.startDate).plus({ days: 7 }).toISO() }}`: Se il `params.startDate` parametro è`"2023-06-15T10:30:00.000Z"`, questa espressione restituirà a`"2023-06-22T10:30:00.000Z"`, che è la data di una settimana dopo la data di inizio.
### Accesso ai risultati di automazione di un'azione precedente
Le automazioni consentono alle applicazioni di eseguire la logica e le operazioni lato server, come interrogare i database, interagire con APIs o eseguire trasformazioni dei dati. Il `results` namespace fornisce l'accesso agli output e ai dati restituiti dalle azioni precedenti all'interno della stessa automazione. Tieni presente i seguenti punti sull'accesso ai risultati dell'automazione:
1. È possibile accedere ai risultati delle fasi di automazione precedenti solo all'interno della stessa automazione.
1. Se hai azioni denominate *action1* e *action2* in questo ordine, *action1* non puoi fare riferimento a nessun risultato e *action2* puoi solo accedere`results.action1`.
1. Funziona anche nelle azioni lato client. Ad esempio, se hai un pulsante che attiva un'automazione utilizzando l'azione. `InvokeAutomation` È quindi possibile impostare una fase di navigazione con una `Run If` condizione come quella di accedere `results.myInvokeAutomation1.fileType === "pdf"` a una pagina con un visualizzatore PDF se l'automazione indica che il file è un PDF.
L'elenco seguente contiene la sintassi per accedere ai risultati di automazione di un'azione precedente utilizzando il `results` namespace.
+ `{{results.stepName.data}}`: recupera l'array di dati da una fase di automazione denominata. *stepName*
+ `{{results.stepName.output}}`: recupera l'output di una fase di automazione denominata. *stepName*
Il modo in cui si accede ai risultati di un passaggio di automazione dipende dal tipo di azione e dai dati restituiti. Azioni diverse possono restituire proprietà o strutture di dati diverse. Ecco alcuni esempi comuni:
+ Per un'azione sui dati, puoi accedere all'array di dati restituito utilizzando`results.stepName.data`.
+ Per un'azione di chiamata API, puoi accedere al corpo della risposta utilizzando`results.stepName.body`.
+ Per un'azione Amazon S3, puoi accedere al contenuto del file utilizzando. `results.stepName.Body.transformToWebStream()`
Consulta la documentazione relativa ai tipi di azioni specifici che stai utilizzando per comprendere la forma dei dati che restituiscono e come accedervi all'interno del `results` namespace. L'elenco seguente contiene alcuni esempi
+ `{{results.getDataStep.data.filter(row => row.status === "pending").length}}`: Supponendo che *getDataStep* sia un'azione di `Invoke Data Action` automazione che restituisce una matrice di righe di dati, questa espressione filtra l'array di dati per includere solo le righe in cui il campo di stato è uguale a `pending` e restituisce la lunghezza (conteggio) dell'array filtrato. Ciò può essere utile per interrogare o elaborare dati in base a condizioni specifiche.
+ `{{params.email.split("@")[0]}}`: Se il `params.email` parametro contiene un indirizzo e-mail, questa espressione divide la stringa in corrispondenza del simbolo @ e restituisce la parte che precede il simbolo @, estraendo in modo efficace la parte relativa al nome utente dell'indirizzo e-mail.
+ `{{new Date(params.timestamp * 1000)}}`: Questa espressione accetta un parametro Unix timestamp (`params.timestamp`) e lo converte in un oggetto Date. JavaScript Presuppone che il timestamp sia espresso in secondi, quindi lo moltiplica per 1000 per convertirlo in millisecondi, che è il formato previsto dal costruttore. `Date` Questo può essere utile per lavorare con i valori di data e ora nelle automazioni.
+ `{{results.stepName.Body}}`: Per un'azione di `Amazon S3 GetObject` automazione denominata*stepName*, questa espressione recupera il contenuto del file, che può essere utilizzato da componenti dell'interfaccia utente come **Image** o **PDF Viewer** per visualizzare il file recuperato. Nota che questa espressione deve essere configurata nell'**output di automazione dell'automazione** da utilizzare nei componenti.