Content in the custom dialog box

[AlekhyaYalla]

I'm trying to create a custom dialog box. How do I specify the content in the box through configuration. I know about the method .openMessageDialog. But I want to use custom dialog box. Below is my code for the typescript```

    const dialogOptions: IDialogOptions<string> = {
        title: "Codespaces Extension",
        configuration: {
            message: _message,
            showCancel: _showCancel,
        },
        lightDismiss: false,
    };
    const dialogResult = await dialogSVC.openCustomDialog(contentContributionId, dialogOptions);

How does it identify the message in the content

[karelkral]

You must register your dialog as the separate extension and then use name of this extension when calling openCustomDialog. See example for azure devops extension, Hub.tsx. Here is the name of extension "panel-content".

private async onCustomPromptClick(): Promise<void> {
    const dialogService = await SDK.getService<IHostPageLayoutService>(CommonServiceIds.HostPageLayoutService);
    dialogService.openCustomDialog<boolean | undefined>(SDK.getExtensionContext().id + ".panel-content", {
        title: "Custom dialog",
        configuration: {
            message: "Use compact pivots?",
            initialValue: this.state.useCompactPivots
        },
        onClose: (result) => {
            if (result !== undefined) {
                this.setState({ useCompactPivots: result });
            }
        }
    });
}

Registration of dialog content in vss-extension.json:

{ "contributions": [ { "id": "panel-content", "type": "ms.vss-web.external-content", "properties": { "uri": "dist/Panel/Panel.html" } } ] }