Creating a UI Page to Start an Operation

You can expose the operation to end users by adding a page that collects the input fields and starts the operation.

.AddPage(
    new Page
    {
        Id = AppConstants.Pages.SendMailOperationPage,
        Title = "Send Mail",
        Name = "send-mail",
        Area = ContainerComponent.Create(
            new OperationStartComponent
            {
                OperationId = AppConstants.Operations.SendMail,
                EntityClassId = IdGen.GetEntityClassId<SendMailInput>(),
                Area = PageBuilderExtensions.VerticalContainer(
                    AppConstants.CustomComponents.HelloUserComponent,
                    PageBuilderExtensions.TextInput(
                        IdGen.GetPropertyId<SendMailInput>(
                            nameof(SendMailInput.MailAddress)
                        ),
                        "Email",
                        true
                    ),
                    new EntityRelationInputComponent
                    {
                        EntityClassId = IdGen.GetEntityClassId<Activity>(),
                        PropertyId = IdGen.GetPropertyId<SendMailInput>(
                            nameof(SendMailInput.ActivityId)
                        ),
                        IsRequired = true,
                    },
                    new TextareaInputComponent
                    {
                        PropertyId = IdGen.GetPropertyId<SendMailInput>(
                            nameof(SendMailInput.Message)
                        ),
                        IsRequired = true,
                    }
                ),
                AfterCancelPageId = AppConstants.Pages.HomePage,
                AfterExecutePageId = AppConstants.Pages.HomePage,
            }
        ),
    }
);

---

Adding the Page to the Menu

Finally, make the operation accessible from the navigation drawer by adding it as a menu item:

.AddMenuItem(
    new MenuItem()
    {
        Name = "Send Mail",
        PageId = AppConstants.Pages.SendMailOperationPage,
    }
)

---

With this setup, users will see a Send Mail page in the app’s menu, where they can enter an email address and a message. Once submitted, the operation is executed on the API side, sending the email.