Create a PromptDialog Page¶

Step 3 of 4

This guide will show you how to create a user interface for the Event Ideas Copilot by setting up a PromptDialog page in AL.

1. Create the Page File¶

Go to src/1-IdeasCopilot/PromptDialog/ and create a new file called IdeasProposal.Page.al.

2. Initialize the Page¶

In Visual Studio Code, use the tpage snippet and select "Page of type PromptDialog" to insert the template code needed for a prompt dialog page.

3. Configure Page Properties¶

Assign an Id to your page.
Remove the SourceTable and SourceTableTemporary properties as they are not necessary for this dialog.
Add IsPreview = true; to indicate that the copilot is in preview mode, showing users that it's still under development.

Info

Setting the copilot to preview mode sets expectations that the copilot is still being tested and improved.

4. Restrict Extensibility¶

Set Extensible = false; to make sure the copilot operates exactly as designed without modifications by others. This helps maintain the integrity of your AI solution as it gains trust among users and partners.

5. Add Input Field¶

Define a global variable named InputText and add it to the Prompt area of the page. This area serves as the input field for users to enter their ideas or questions.

field(InputText; InputText)
{
    ShowCaption = false;
    MultiLine = true;
    ApplicationArea = All;
}

6. Add Response Field¶

Add another global variable named ResponseText and place it in the Content area to display the AI-generated response.

field(ResponseText; ResponseText)
{
    MultiLine = true;
    ApplicationArea = All;
    ShowCaption = false;
    Editable = false;
}

7. Implement Generate Action¶

Include a system action called Generate to handle the generation of responses when the user interacts with the copilot. When this action is triggered, it should process the user's input and display a response. For now, assign a hardcoded response to simulate the interaction.

area(SystemActions)
{
    systemaction(Generate)
    {
        trigger OnAction()
        begin
            ResponseText := 'This is AI generated text.';
        end;
    }
}

8. Make Your Copilot Discoverable¶

Ensure the copilot is easily accessible by adding an action to a common page, such as the "Job List" page.

Create a Page Extension

Add the Event Ideas Copilot action by creating a page extension for the Job List page:

    action("GPT Ideas")
    {
        Caption = 'Event Ideas';
        ToolTip = 'Generate event ideas using Copilot';
        Image = Sparkle;
        ApplicationArea = All;
        trigger OnAction()
        var
            IdeasCopilot: Page "GPT Ideas Proposal";
        begin
            IdeasCopilot.RunModal();
        end;
    }

Info

The Sparkle icon is a standard icon used for copilot actions in Business Central. It helps users quickly identify and access the copilot functionality.

Understanding When to Use Sparkle and SparkleFilled Icons

Microsoft provides two versions of the sparkle icon: Sparkle and SparkleFilled. Here’s when to use each:

Sparkle: Use the Sparkle icon by default for all Copilot actions to maintain a uniform appearance.
SparkleFilled: Use the SparkleFilled icon to emphasize a particular Copilot action when multiple actions are present on the same page. Typically, only one action should use the SparkleFilled icon to highlight its importance or priority.

9. Add Action to Prompting Group¶

After setting up your Copilot page and ensuring it can generate responses, the next step is to make it easily accessible from other parts of Business Central. This is done by adding an action to the Prompting group on relevant pages.

actions
{
    addfirst(Prompting)
    {
        action("GPT Ideas")
        {
            ...
        }
    }
}

This action will make your Copilot more visible and directly accessible.

Warning

As of July, 2024 Prompting group is not visible in the Docker environment (version 24.3). You can still add the action to the Processing actions group.

Conclusion¶

By following these instructions, you have successfully created a UI for your Event Ideas Copilot. Now you can publish your app and experiment with the UI. Input any text, click on the generate action, see the generation mode in action, and then view the AI-generated text displayed in the content area.

Next Steps¶

Now that you have set up the PromptDialog page, let's move on to implementing the AI logic for generating event ideas and plans.