1. Howto: Custom page design Creating your own ASPX page Step-by-step guide

2. Why? Use Visual Studio to create your own design Easily make AJAX enabled sites Convert existing solutions to E-Site

3. 1. Setup E-Site Download current E-Site setup package from http://ikx.no/forhandlerhttp://ikx.no/forhandler Unzip to c:\inetpub\wwwroot\sitename Setup as application in IIS admin (for IIS7 use classic pool) Initialize site from http://localhost/sitenamehttp://localhost/sitename (More help on http://ikx.no/devhelp3/installing) http://ikx.no/devhelp3/installing

4. 2. Open your website in visual studio

6. 3. Create your own page

7. ... Creating page Select Web Form (or Ajax enabled) Give it a logical name Click Add

8. 4. Change inheritance Your page class should inherit the ”ESiteDisplayPage” class Although it isn’t absolutely required. Beware some of the core UserControls might assume it.

9. 5. Setup your design Add CSS files, cut, copy paste, do whatever Use elements preferably not tables Use XHTML

10. 6. Use the design in E-Site Login to your site Open design & settings Click ”New” Click ”Custom page”

11. 7. Creating custom page Name it Select ASPX file Click ”Save” obviously (If you didn’t know to click save, please just give up now)

12. 9. Set design for your site Click contents Right click some folder or item Click ”Set design” Click your newly created ”Custom page” design

13. 8. Test your page Click ”View web site” Click the folder you just set your design for This page should now run your ASPX page

14. 9. Add user controls Common and recommended controls are: –DisplayPart.ascx –Drag and drop them into the ASPX page –They are all located below the /website/design/part folder

15. Set the ObjectID property This ID matches your Design part ID in E- Site (See next page...)

16. Matching design part Check your design parts folder Create matching objects for your user controls Check the ID column for the ObjectID

17. Errors Some of the controls have. In their name, causing visual studio 2005 to make an illegal name referance

18. Rename tag referance Rename ”Frame.html” to ”Frame_html”

19. Also correct the instance Scroll down to the occurring referance Change the. To _ Also correct the id

20. Voila Back in ”Design” mode No error

21. 10. Page title Set the page title to runat=”server” OnLoad add this: PageTitle.Text = DisplayObj.GetHeade rValue()

22. 11. Add your design files to protected files E-Site update will otherwise think it’s an obsolete file and delete it!

23. 12. Thats it For a list of the available user controls see http://ikx.no/devhelp3/designparts http://ikx.no/devhelp3/designparts