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

ImportantThe following article uses options that are available starting with the Enterprise edition and project type.

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.

1. Create Project

Because Spring theme is an 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

Launch Advanced Installer, select Enterprise and press the [ Create Project ] button.

Start Page

2. Select the Spring Theme

ThemesGo to the Themes Page, select the Spring theme and press the [ Set as current ] button. A warning message will appear. Press the [ Change theme ] 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.

DialogsGo 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 [ Global Controls 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:
NameArgumentCondition
Display a specific child dialogDiskCostDlgAI_INSTALL

TipThis published event is used for tutorial purposes only, in order to see how and if the button works.

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.

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

Properties Pane

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.

NoteWhenever the Spring theme is selected, the resource files will be automatically added in the Files and Folders Page under Windows Volume\Temporary\[|ProductCode]\Spring.742DA8B7 folder. These files will be accessible only during the package run time and can not be removed from the project.

  • 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:

IdentifierDescription
external.MsiPublishEvents('DiskCost_Button')external.MsiPublishEvents is a function that will execute the published events associated with the DiskCost_Button push button control
Disk Cost InformationThe hyperlink will appear using this name
  • Save the file and return to Advanced Installer.

5. Assign the edited HTML file to the dialog

Files and FoldersGo 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.

Edit Temporary File

6. Condition which controls to appear in HTML layout

DialogsWe 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:
ConditionAction
(NOT AIEXTERNALUI) OR (AI_IE_Ver < "6")Show

Control Conditions

ImportantThis condition (NOT AIEXTERNALUI) OR (AI_IE_Ver < "6") will make the button visible only if the package is running using Windows Installer interface. The package will run using this interface when Internet Explorer 6 or higher is not present on the machine.

7. Build the project

Build ProjectAdd your files to the project, build and run the project.

8. See also

Display user friendly installation log