How do I add a new control in dialogs using Spring theme?

This tutorial will show the basics on how to edit the HTML based Spring Theme. We will add a new button that once pressed will display the DiskCostDlg dialog.

Because Spring theme is a HTML based theme and uses HTML Host Controls the installer will feature two versions of the User Interface conditioned by Internet Explorer:

• If Internet Explorer 6 or higher is installed on the target machine, the HTML layout will be displayed using Enhanced User Interface
• If Internet Explorer 6 or higher is not installed on the target machine, the standard Windows Installer interface be displayed

In order to change how the dialogs look when running the package the following steps must be taken:

• 1. Start an Enterprise Project
• 2. Select the Spring Theme
• 3. Add a new push button
• 4. Edit the HTML file
• 5. Assign the edited HTML file to the dialog
• 6. Condition which controls to appear in HTML layout
• 7. Build the project
• 8. Conclusion

1. Start an Enterprise Project

If Advanced Installer is not currently running, launch it by double-clicking a desktop icon or selecting it from the “Start” menu. When the application starts, you will see a dialog where you can choose the type of the project you want to create.

Select Enterprise and press the [ OK ] button.

2. Select the Spring Theme

Go to the Themes Page, select the Spring theme and press the [ Set as current ] button. A warning message will appear. Press the [ Yes ] button to continue.

Optionally, you can customize the general appearance by selecting a different Style and Frame or if to use a header or not. You can also change the Icon and Background for your theme by pressing the [ More options ] button and using the [ Edit... ] option.

3. Add a new push button

In this section we will add a new push button control on the "SetupTypeDlg dialog". We will create the published events and the necessary settings so that a message box will appear when the button will be pressed.

Go to the Dialogs Page and select the "SetupTypeDlg" dialog from the tree list on the left.

Add a new push button control by using the [ New Control ] toolbar button or by selecting it from the Control Toolbox dialog which is accessible through the [ Toolbox ] toolbar button.

• Using the Properties pane on the right, in the Name field write DiskCost_Button which is the name of this control. This name will be used later when editing the HTML file.
• Using the Events Editor navigate to the "Published Events" tab. Use the [ New... ] button to add the following control event:

4. Edit the HTML file

In the above sections we selected the Spring theme for our package, added a button to a dialog that will appear when the standard Windows Installer interface will be used. In this section we will edit the HTML file and create a hyperlink instead of a button, with the same functionality as the button, that will appear when the installer is running using the HTML layout.

In the Dialogs Page select the HtmlHost control by using the combobox from the Properties pane on the right.

The File field will display the location of the HTML file associated with this dialog, in this case setuptype.html. In order to modify the layout for this dialog the html file must edited.

• Using Windows Explorer, navigate to the location where Advanced Installer resides and select the setuptype.html from the themes\spring\resources\html folder. Usually Advanced Installer is installed in C:\Program Files(x86)\Caphyon\Advanced Installer 8.2 for Windows X64 systems.
• Copy the setuptype.html file to location so that the original file doesn't get modified. For example: G:\work\setuptype.html.
• Open the newly copied HTML file in an editor, like Notepad.
• Navigate until you find the following section:

...
   </div>
    <div id="footer" style="visibility: hidden">
      <div class="button-group">
        <div class="buttonwrapper">
...

• Above the </div> from this section we will create the hyperlink:

<div style="padding-top: 90px; padding-left: 100px">
        <a href="#" title="" onclick="external.MsiPublishEvents('DiskCost_Button');">Disk Cost Information</a>
</div>

Description of the code:

• Save the file and return to Advanced Installer.

5. Assign the edited HTML file to the dialog

Go to the Files and Folders Page and navigate to Windows Volume\Temporary\[|ProductCode]\Spring.742DA8B7 where the temporary files reside.

• Find and select the setuptype.html file
• From the context menu use the "Properties..." command
• The Edit Temporary File Dialog will appear. Use the [ ... ] button next to the Source Path field to navigate and select the edited html file. In our example: G:\work\setuptype.html.

6. Condition which controls to appear in HTML layout

We will condition the push button to appear only when the Windows Installer interface is being used. When the HTML layout will be used, the hyperlink will appear instead.
In order to achieve this the following steps must be taken:

• Go to the Dialogs Page and select the "SetupTypeDlg" dialog from the tree list on the left.
• Select the DiskCost_Button control and set the Visible attribute to the False value.
• With DiskCost_Button control still selected go to the "Control Conditions" tab and add the following condition:

7. Build the project

Add your files to the project, build the project by using the [ Build ] toolbar button and test it.

8. Conclusion

In this tutorial we described how to edit the HTML file assigned with a dialog for the Spring Theme. We added a simple push button and assigned a control event to it when using the Windows Installer interface. For the HTML layout of the Spring theme we used a hyperlink that performs the same as the push button. The link between the installer dialog and the HTML file is the HTML Host Control. Evey HTML file assigned to every dialog in Spring theme can be edited based on this example.

The End

This concludes our tutorial.