Esercizio - Creazione di oggetto componente aggiuntivo di controllo

  • 12 minuti

Scenario

Per testare le abilità appena apprese sui componenti aggiuntivi di controllo, si desidera mostrare il nome, l'e-mail e il numero di telefono del cliente in un componente aggiuntivo di controllo visualizzato nella pagina Fattura di vendita.

Attività

  • Creazione di un componente aggiuntivo di controllo.

  • Hosting del componente aggiuntivo di controllo in un CardPart.

  • Invio di dati a JavaScript.

  • Utilizzo di JavaScript per visualizzare le informazioni.

Passaggi

  1. Avviare Visual Studio Code.

  2. Selezionare Visualizza > Estensioni (CTRL+MAIUSC+X).

  3. Immettere AL Language nella casella di ricerca Cerca le estensioni nel Marketplace.

  4. Selezionare il pulsante verde Installa.

  5. Creare un nuovo progetto di estensione AL. Selezionare Visualizza > Riquadro comandi... (CTRL+MAIUSC+P).

  6. Immettere AL: Go! nella casella di ricerca e selezionare il comando dall'elenco.

  7. Accettare il percorso suggerito (o immettere un altro percorso).

  8. Selezionare la versione più aggiornata di Business Central come piattaforma di destinazione.

  9. Selezionare Microsoft cloud sandbox come endpoint di sviluppo.

  10. Scaricare i simboli dell'applicazione. Selezionare Visualizza > Riquadro comandi... (CTRL+MAIUSC+P).

  11. Immettere AL: Download symbols nella casella di ricerca e selezionare il comando dall'elenco.

  12. Se richiesto, fornire le credenziali dell'organizzazione (account Microsoft 365 o account Microsoft Entra ID).

  13. Aprire il file app.json e modificare l'impostazione nome in Customer Info. Modificare l'impostazione editore in Cronus International Ltd.

  14. Rimuovere il file HelloWorld.al.

  15. Creare un nuovo file con il nome CustInfoCtrl.ControlAddIn.al e usare il frammento tcontroladdin. Modificare il nome nel frammento in CustInfoCtrl.

  16. Includere jQuery nella proprietà scripts.

    https://code.jquery.com/jquery-3.4.1.min.js

  17. Creare un file nuovo con il nome CustInfoCardPart.Page.al. Usare tpage per creare una nuova pagina. Impostare la proprietà PageType su CardPart.

  18. Impostare SourceTable su Customer.

  19. Nella sezione layout aggiungere un usercontrol nell'area del contenuto che ospita l'oggetto componente aggiuntivo di controllo.

    layout
{
    area(Content)
    {
        usercontrol(CustInfoCtrl; CustInfoCtrl)
        {

        }
    }
}

  20. Creare un file nuovo con il nome SalesInvoicePageExtension.al. Usare il frammento tpageext per creare una nuova estensione di pagina. Estendere la pagina Fattura di vendita.

  21. Aggiungere una parte che ospiterà il file CustInfoCardPart all'area Riquadri Dettaglio informazioni. Collegare la parte utilizzando la proprietà SubPageLink. Usare Fatturare a - Nr. cliente.

    layout
{
    addfirst(factboxes)
    {
        part(CustInfoCardPart; CustInfoCardPart)
        {
            SubPageLink = "No." = field("Bill-to Customer No.");
        }
    }
}

  22. Creare una procedura locale chiamata GetCustomerInfo nella pagina CardPart.

  23. Creare un JsonObject con il nome, l'e-mail e il numero di telefono del record corrente. Passare il JsonObject al componente aggiuntivo di controllo.

    local procedure GetCustomerInfo()
var
    custInfo: JsonObject;
begin
    custInfo.Add('name', Rec.Name);
    custInfo.Add('email', Rec."E-Mail");
    custInfo.Add('phone', Rec."Phone No.");
    CurrPage.CustInfoCtrl.GetCustomerInfo(custInfo);
end;

  24. Creare un trigger denominato OnAfterGetCurrentRecord nella pagina CardPart. Chiamare GetCustomerInfo nel trigger.

  25. Creare una procedura chiamata GetCustomerInfo nel componente aggiuntivo di controllo. Aggiungere un JsonObject come parametro senza aggiungere alcun codice.

    procedure GetCustomerInfo(CustInfo: JsonObject)

  26. Creare un file JavaScript con il nome start.js.

  27. Aggiungere il codice seguente:

    var controlAddIn, nameDiv, phoneDiv, emailDiv;
controlAddIn = $("#controlAddIn");
nameDiv = $("<div />", { id: "nameDiv" });
phoneDiv = $("<div />", { id: "phoneDiv" });
emailDiv = $("<div />", { id: "emailDiv" });

controlAddIn.append(nameDiv);
controlAddIn.append(phoneDiv);

window.GetCustomerInfo = function(custInfo) {
    controlAddIn.append(emailDiv);
    nameDiv.html("Name: " + custInfo.name);
    phoneDiv.html("Phone: " + custInfo.phone);
    emailDiv.html("E-mail: " + custInfo.email);
}

  28. Aprire il componente aggiuntivo di controllo e impostare la proprietà StartupScript su start.js.

  29. Rimuovere le proprietà Stylesheets, RecreateScript, RefreshScript e Images.

  30. Rimuovere l'evento e la procedura creati dal modello.

  31. Pubblicare l'estensione nella sandbox. Selezionare Visualizza > Riquadro comandi... (CTRL+MAIUSC+P).

  32. Immettere AL: Publish nella casella di ricerca (o premere il tasto di scelta rapida F5) e selezionare il comando dall'elenco.

  33. Si può testare l'estensione, se lo si desidera, aprendo una fattura di vendita. Il componente aggiuntivo di controllo dovrebbe mostrare le informazioni sul cliente.