New PromptDialog UI Elements

Step 3 of 8

This part of the workshop introduces you to new UI elements, such as data caption expressions, placeholder text, prompt guide actions, and structured output fields, you can use in PromptDialog pages. You’ll learn how to enhance the user interface to make it more interactive and user-friendly.

1. Add Title Text

Start by setting up what text appears in the title bar of the page.

DataCaptionExpression allows you to specify any text value that will be displayed in the title bar of the page. In this case, the value of the user input field InputProjectDescription will be displayed.

• Location: Open the "\src\2-PlanningCopilot\PromptDialog\CopilotProjectProposal.Page.al" file.
• Implementation:

  DataCaptionExpression = InputProjectDescription; // Displays this text in the title bar
  

2. Implement Placeholder

Next, add an input field where users can enter details about the project they want to start.

• Modify: In the area(Prompt) block.
• Add:

  field(ProjectDescriptionField; InputProjectDescription)
  {
      ApplicationArea = All;
      ShowCaption = false;
      MultiLine = true;
      InstructionalText = 'Describe the project you want to create with Copilot';
  }
  

  InstructionalText, or so called placeholder, is used to provide a hint or instruction to the user about what to enter in the field, in this case, a project description.

3. Define Output UI

Set up where the copilot will display the generated project details and structure.

• Modify: In the area(Content) block.
• Add:

  field("Job Short Description"; JobDescription)
  {
      ApplicationArea = All;
      Caption = 'Project Short Description';
  }
  field("Job Full Details"; JobFullDescription)
  {
      ApplicationArea = All;
      MultiLine = true;
      Caption = 'Details';
  }
  part(ProposalDetails; "Copilot Job Proposal Subpart")
  {
      Caption = 'Job structure';
      ShowFilter = false;
      ApplicationArea = All;
      Editable = true;
      Enabled = true;
  }
  

The JobDescription and JobFullDescription fields will display the generated project details, while the ProposalDetails part will show the structured output of the project plan.

Warning

It's restricted to add repeater group to the page, so we use part to display the lines.

4. Add Prompt Guide Actions

Help users quickly fill in the input with predefined text templates.

• Modify: Inside the area(PromptGuide) block.
• Add:

  action(OrganizeConference)
  {
      ApplicationArea = All;
      Caption = 'Organize a conference';
      trigger OnAction()
      begin
          InputProjectDescription := 'Organize a [conference] about [AI].';
      end;
  }
  

  This action will set the InputProjectDescription field to a predefined value when the user clicks on the action. Users can then modify the text as needed.

5. Implement Generate Logic

Implement the core functionality where the copilot processes user input to generate a project plan.

• Modify: In the systemaction(Generate) block.
• Add:

  trigger OnAction()
  begin
      GenerateProjectPlan();
  end;
  

  This action will call the GenerateProjectPlan procedure, that you will implement later, to generate the project plan based on the user input.

6. Close Page Logic

The main idea of the PromptDialog page is to keep the user in the loop until they are satisfied with the generated proposal.

Ensure the generated proposal is saved only when the user is satisfied and chooses to keep it.

• Modify: At the end of the page file.
• Add:

  trigger OnQueryClosePage(CloseAction: Action): Boolean
  begin
      if CloseAction = CloseAction::OK then
          ApplyProposedProjectPlan();
  end;
  

This code will call the ApplyProposedProjectPlan procedure, which you will implement later, to save the generated project plan to the database.

7. Generate and Apply Logic

Add backend logic for generating the project plan and saving it to Business Central.

• Generate Project Plan:

  local procedure GenerateProjectPlan()
  begin
      // Interact with Azure OpenAI to generate project plans.
  end;
  

• Apply Proposed Project Plan:

  local procedure ApplyProposedProjectPlan()
  begin
      // Save the generated plan to Business Central.
  end;
  

8. Make Copilot Discoverable

Now add the "GPT Copilot Project Proposal" page to the "Job List" page, so that users can easily access it. This should be done in the same way as you added the "GPT Ideas Proposal" page.

Conclusion

By implementing these steps, you will have effectively introduced new PromptDialog UI elements into your Project Planning Copilot. Test the new features by publishing your app and using them in Business Central.

Next Steps

Proceed to the next step to explore the output UI and part page of the Project Planning Copilot in your Dynamics 365 Business Central environment.