Esempio: creazione di una vista utilizzando HTML personalizzato

Modifica in linea

Questo esempio mostra come utilizzare gli script per collegare i valori selezionati in una vista HTML personalizzata ai dati di business di una vista.

Panoramica delle attività in questo esempio:
  • Aggiungere codice HTML personalizzato a una vista che definisce una vista di selezione per la selezione di un tipo di account, ad esempio Corrente o Risparmio.
  • Aggiungere oggetti di business alla vista.
  • Configurare un gestore eventi (load) con uno script personalizzato per collegare il valore selezionato della vista di selezione all'attributo dell'oggetto di business di tipo complesso.
Di conseguenza, verrà creato un elenco di selezione del tipo di account che può essere riutilizzato o esteso e quindi utilizzato su più pagine.
Prima di iniziare, è necessario avere dimestichezza con l'API (application programming interface) di visualizzazione ed è necessario aver già creato i propri oggetti di business (consultare Tabella 2).
  1. Aggiungere codice HTML personalizzato a una vista:
    1. In un toolkit o in un'applicazione di processo, creare una nuova vista denominata getAccountTypes.
    2. Nella pagina Layout , fare clic sul segno più per aggiungere un elemento HTML personalizzato all'area.
    3. Nelle proprietà in HTML, selezionare l'opzione Testo e fornire il codice HTML personalizzato. Per questo esempio, è possibile utilizzare il codice seguente per definire una vista di selezione:
      <select name="AccountType" size="1">
  <option value="Savings">Savings Account</option>
  <option value="Current">Current Account</option>
</select>
    4. Nella pagina Panoramica , selezionare Can Fire Boundary Event.
  2. Aggiungere oggetti di business alla vista.
    1. Nella pagina Variabili , fare clic sul segno più accanto a Dati aziendali
    2. Per il Tipo di variabile, selezionare l'oggetto aziendale TSAPP_ValidateDocumentCaseProperties.
    3. Nel campo Nome , immettere caseProperties.
  3. Nella pagina Funzionamento , configura il gestore eventi load con uno script personalizzato per associare il valore HTML personalizzato selezionato all'attributo dei dati di business.
    1. Registrare il modulo del pulsante Dojo e l'alias che la vista caricherà dinamicamente.
      1. Nella pagina Comportamento , selezionare Dipendenze AMD.
      2. Fare clic su Aggiungi e specificare le informazioni riportate di seguito:
        • Nella colonna ID modulo , immettere dojo/_base/connect. Ciò dichiara una dipendenza sul modulo che fornisce la gestione eventi per i nodi DOM e la relativa funzionalità.
        • Nella colonna Alias , immettere connect. Questo è l'alias utilizzato nel codice per fare riferimento al modulo connect .
        Suggerimento : questo esempio utilizza un modulo AMD incluso nell'infrastruttura. Se i moduli AMD non sono già inclusi, consultare Aggiunta di moduli AMD personalizzati per informazioni su come aggiungere e quindi accedere a tali moduli.
    2. In Gestori eventi, selezionare carica e fornire uno script personalizzato. Per questo esempio, è possibile utilizzare il seguente script:
      var selectElement = this.context.element.getElementsByTagName("select")[0];

var onChangeHandle = connect.connect(selectElement, "onchange", this, function(newValue){
if(this.context.binding){
var tempBinding = this.context.binding.get("value");
tempBinding.set("TSAPP_AccountType", newValue.target.value);
}
});
      Tabella 1. Note sullo script
      Elemento Descrizione
      (questo == l'oggetto vista) L'evento di caricamento ha il contesto dei dati del payload e quello dell'oggetto di dati di business ad esso associato (aggiunto al passo 2).
      connect.connect(selectElement, "onchange" La variabile onChangeHandle nello script ha il nuovo valore selezionato nella vista Seleziona. L'evento onChange della vista HTML personalizzata viene richiamato utilizzando connect.connect.
      Suggerimento connect.connect(selectElement, "onchange" deriva dall'alias della voce dojo/_base/connect nelle dipendenze AMD. Pertanto, lo script deve essere modificato di conseguenza in base al nome alias. Ad esempio, se myConnect è il nome alias, lo script sarà simile a myConnect.connect(selectElement, "onchange".
      this.context.binding.get("value").set("TSAPP_AccountType", newValue.target.value); Il nuovo valore selezionato nella vista Seleziona è legato all'attributo specifico dei dati aziendali ( TSAPP_AccountType ).
  4. Per verificare il proprio lavoro, creare un servizio umano ed effettuare le seguenti operazioni:
    1. Nella pagina Diagramma , aggiungere una pagina.
    2. Nella pagina Variabili, aggiungere TSAPP_ValidateDocumentCaseProperties come variabile di uscita.
    3. Selezionare la pagina, trascinare la vista getAccountTypes sull'area di disegno e selezionare la variabile TSAPP_ValidateDocumentCaseProperties come vincolo.
    4. Nella pagina Diagramma , completare il collegamento della pagina.
    5. Fare clic su Salva o su Termina modifica.
    6. Eseguire il servizio umano. Viene aperto un browser e viene visualizzato l'elenco di selezione.

Riferimenti

Tabella 2. Oggetti di business di esempio
Elemento libreria Nome di esempio
Oggetti di business TSAPP_ValidateDocumentCaseProperties

Parametri:

TSAPP_Zipcode (String)
TSAPP_Age (String)
TSAPP_AccountStatus (String)
TSAPP_CustomerType (String)
TSAPP_Name (String)
TSAPP_City (String)
TSAPP_AccountType (String)