Adding a Custom Dialog To Your Wix Installer
Recently I made the move to Wix3 for a couple of projects and I have been quite happy. One of the things that has been simplified is adding a a custom step into the installer process.
I’ll leave the heavy lifting of how to insert the custom dialog to Jan Schepens’ post Making a custom setup dialog using WiX 3.0. He tells you how to customize your UI layout and insert a new dialog into the process. Read this post it explains it well. Neil Sleightholm has a similar post Customised UI’s For Wix that is about removing dialogs from the layout.
I’m going to be straight with you. This post is mainly for myself. I want to have this resource six months from now when I need to do the same thing again.
Wiring Up Your Dialog
Jan does a good job with his post so good that I want to leave it mostly alone. I do want to underscore the need to wire up the dialog into the flow of the UI for going in the Back and Next wizard directions.
<Publish Dialog="InstallDirDlg" Control="Back" Event="NewDialog" Value="LicenseAgreementDlg">1</Publish>
<Publish Dialog="InstallDirDlg" Control="Next" Event="SetTargetPath" Value="[WIXUI_INSTALLDIR]" Order="1">1</Publish>
<Publish Dialog="InstallDirDlg" Control="Next" Event="DoAction" Value="WixUIValidatePath" Order="2">NOT WIXUI_DONTVALIDATEPATH</Publish>
<Publish Dialog="InstallDirDlg" Control="Next" Event="SpawnDialog" Value="InvalidDirDlg" Order="3"><![CDATA[NOT WIXUI_DONTVALIDATEPATH AND WIXUI_INSTALLDIR_VALID<>"1"]]></Publish>
<Publish Dialog="InstallDirDlg" Control="Next" Event="NewDialog" Value="webSiteLocator" Order="4">WIXUI_DONTVALIDATEPATH OR WIXUI_INSTALLDIR_VALID="1"</Publish>
<Publish Dialog="InstallDirDlg" Control="ChangeFolder" Property="_BrowseProperty" Value="[WIXUI_INSTALLDIR]" Order="1">1</Publish>
<Publish Dialog="InstallDirDlg" Control="ChangeFolder" Event="SpawnDialog" Value="BrowseDlg" Order="2">1</Publish>
<Publish Dialog="webSiteLocator" Control="Back" Event="NewDialog" Value="InstallDirDlg">1</Publish>
<Publish Dialog="webSiteLocator" Control="Next" Event="NewDialog" Value="VerifyReadyDlg">1</Publish>
<Publish Dialog="VerifyReadyDlg" Control="Back" Event="NewDialog" Value="webSiteLocator" Order="1">NOT Installed</Publish>
<Publish Dialog="VerifyReadyDlg" Control="Back" Event="NewDialog" Value="MaintenanceTypeDlg" Order="2">Installed</Publish>
The key when inserting your dialog is to also rewire the NewDiaqlog events from the previous and next dialogs in the wizard to point at your new dialog.
Creating the Custom Dialog
Hate to break this to you the fun part is over. The trick with the custom dialog is actually creating the custom dialog. Editing Xml user interfaces is not fun and the edit/test cycle between building your Wix installer and manually testing it is painful. I went looking for an interactive dialog editor and found WixEdit. Suddenly a lot of the pain went away. WixEdit is still a bit rough here are a couple of tips.
- Copy the WixEdit exe and dlls into your Wix doc directory to make it happy.
- WixEdit doesn’t currently like the Wix3 namespace. I could not get it to open my .wxs files. If you have an existing dialog you wish to edit it... Create a new project with WixEdit and copy your Dialog Xml into that project file. Then copy the resulting dialog xml back out when you are done. Ulgy but better than nothing.
Bonus: Enabling and Disabling Controls Based On A Checkbox
I wanted the dialog to enable the text fields when a checkbox is pressed. The trick to this is having conditions on the controls toggling the control’s enabled state based on the checkbox’s property.
<Control Id="headerLabel" Type="Text" X="20" Y="126" Width="290" Height="13" Text="Host Header Name" />
<Control Id="webSiteHeader" Type="Edit" Property="WEBSITEHEADER"
X="20" Y="139" Width="320" Height="15"
Text="[WEBSITEHEADER]" Disabled="yes">
<Condition Action="disable"><![CDATA[CUSTOMIZEWEBSITE <> "yes"]]></Condition>
<Condition Action="enable"><![CDATA[CUSTOMIZEWEBSITE = "yes"]]></Condition>
</Control>
<Control Type="CheckBox" Id="customizeWebSiteLocation" Property="CUSTOMIZEWEBSITE"
Width="120" Height="17" X="240" Y="56"
Text="Customize Website Binding" CheckBoxValue="yes">
<Condition Action="show">NOT Installed</Condition>
</Control>
