Configure Project Information and Select Theme Dialogs

The header component provides controls that can be used to open the Project Information and Select Theme dialogs:

  • The Project Information dialog provides various project details, including its packaged components, HTML5 Web XPanel status, and diagnostics for project testing. For more information, refer to View Project Information.

    Project Information Dialog Box

  • The Select Theme dialog allows the project theme to be changed during runtime. For more information, refer to Select a Theme.

    Select a Theme Dialog Box

The controls to access these dialogs can be shown or hidden in the header bar by setting the displayInfo and displayTheme properties to true or false, respectively, in the header section of the project-config.json file.

The following code sample shows the dialog controls:

Copy 
"header": { 
    "display": true, 
    "displayInfo": true,
    "displayTheme": true,
}, 

Header Bar (with Information and Theme Buttons)

The following code sample hides the dialog controls:

Copy 
"header": { 
    "display": true, 
    "displayInfo": false,
    "displayTheme": false,
}, 

Header Bar (without Information and Theme Buttons)

If a developer chooses to use a custom header or no header, the <ch5-template> class can be used to display the dialog controls anywhere on the page in a project. Refer to the following code sample.

Copy 
<section id="page1-page" class="details-container" aria-labelledby="Page1">
    <!-- BEGIN::CHANGEAREA - your page html markup goes here -->
    <ch5-template templateId="template-info-widget" ></ch5-template> 
    <ch5-template templateId="template-theme-widget" ></ch5-template>
    
    <!-- END::CHANGEAREA -->
</section>

Project with Information and Theme Buttons Outside of the Header Bar