Building a Client Profile Deployment for photoSuru with the Client Profile Configuration Designer

The following is step-by-step instructions describing how to customize and create an installer for photoSuru and Subscription center using the Client Profile Configuration Designer. This document references the following files found in the resources zip file:

• photSuru1.htm, photSuru2.htm, photoSuru3.htm, photoSuru4.htm, photoSuru5.htm
• photoSuru1.png, photoSuru2.png, photoSuru3.png, photoSuru4.png, photoSuru5.png
• background.jpg

For a video demonstration of this “How-To” click here.

For additional guidance and a list of known issues see the Guidance and Known Issues article.

1. Download and install the Client Profile Configuration Designer.
2. Download the resources for this example.
3. Download Subscription Center.
4. Launch the Client Profile Configuration Designer.
5. Create a new project by clicking on New in the File menu and enter the details for the project.
   
   
6. Add a prerequisite by clicking the “Add prerequisite” button. Add the “.Net Framework Client Profile” prerequisite as shown below:
   
   
7. Add Chained Installers by clicking the “Add installer” button to the right of the “Add prerequisite button”.
   1. Add Subscription Center as a Windows Installer Package
      1. Name the package, ie: SubscriptionsCenterMSI
      2. Specify the location of the installer package on your system
         
         
   2. Add photoSuru as a ClickOnce deployment
      1. Name the package, ie: PhotoSuruClickOnceApp
      2. Specify the location (URL) of the installer: http://www.photoSuru.com/photoSuru.application
         
         
8. Add additional installation details to each of the added packages. Specify estimate installation sizes for both of the packages by selecting each package under Chained Installers and navigating to the Install Settings tab. This is needed for to accurately display the installer’s progress during installation.
   
   
9. Add a custom License Agreement by clicking on the “Setup package” and navigating to the “License agreement” expander. Check the checkbox to include a license agreement and then specify your Eula file.
   
   
10. Customize the Common Setting page
    1. Specify the BackgroundImage in the Properties list (in the bottom right ), ie: background.jpg, then re-locate Button1 & Button2.
       
       
11. Customize the Pre-Installation (EULA) page
    1. Hide the Print Button via the Properties list by changing its visibility.
    2. Resize the EULA box as needed by resizing the control directly or via the Property list when the control is selected from the dropdown list above the property list.
       
       
12. Customize the Progress page
    1. Adjust the Web Browser Control’s size and location.
    2. Add pages to the Web Browser Control by selecting the Control and clicking the “Add page” button as shown below. Add a web page, ie: photoSuro1.htm.
       
       
    3. Reveal the added webpage’s “Additional files” folder. Add a file, ie: photoSuru1.png, via the context menu or the “Add support file to page” button above the TreeView.
       
       
    4. Repeat steps B and C to show additional web pages during installation, ie: photoSuru2.htm, photoSuru3.htm, photoSuru4.htm, photoSuru5.htm, with their respective images, ie: photoSuru2.png, photoSuru3.png, photoSuru4.png, photoSuru5.png. The way these web pages are shown can be customized in the Browser Control’s property list.
       
       
    5. Resize then center the Progress bar. Adjust the location of the status text then change its foreground color to white via the Properties list
       
       
13. Customize the Rollback page :
    1. Hide the Web Browser Control then adjust the Progress Bar and status text again.
       
       
14. Customize the Finish page, Error page, Cancelled page, and Reboot page.
    1. Adjust the status text’s location and foreground color again.
       
       
15. Delete the Finish page.
    1. Select the Finish page in the expandable TreeView in the top right and click the “Remove Step…” Button to automatically close the installer after the installation succeeds.
16. We are done designing the Setup experience and adding the necessary files. To Debug:
    1. Save the project.
    2. Click on the Preview Button to debug, indicated by the red arrow below. This will simulate the install process. Note: No files will actually get installed. Click on the “Successful Setup” and “Fail Setup" Buttons to simulate the two scenarios.
       
       
17. We are done and ready to publish. To build the release:
    1. Select “Release” from drop-down shown below and click the Build Button next to the Preview Button.
    2. Inside the “sfx” directory, within the project’s root directory, you should see the built setup.exe.
       
       

About samirpatel

This is my weblogs profile...