Walkthrough: How I add new pages and server-side content
Posted: Mon Dec 03, 2007 8:19 am
I don't know if this is the "right" way to do it, but here are the steps I take to add new pages to AC7 with my own user controls for server-side content and functionality.
Most sites will have some sort of custom menu component, as mine does. So the end result URL will be need to be added to your menu structure. If you are wanting something added to the header or footer links, just add a link to your page in the appropriate header/footer content page under Website/Content and Layout in the Admin screen.
Step 1: Make a blank page
Start by creating a new web page. For this example, we'll use foo.aspx as our file name. In the root of the AC7 site there will be a generic blank page called webpage.aspx. Copy that file to foo.aspx. We'll work with foo.aspx from now on. Your page has all the starting elements needed by AC7, but AC7 doesn't know how you want it laid out.
Step 2: Create an AC7 layout
Go in to your Admin screen. Select Website/Content and Layout. Create a new Content page and call it something you like. I preface all mine with my company name so they're grouped together when sorted by name. Let's call ours "Foo Product Info". Don't save it yet, we have a change to make since it contains nothing so far.
Step 3: Populate the layout
Since the user control we are making will be handling design layout, I don't do any design layout (tables, html etc) here. All you need to do is tell AC7 to reference the user control you've created. In the content section of the new entry we've created, simply put one line that says [[ConLib:Custom\Foo-ProductInfo]]. That's it, save it. Now whenever AC7 is told to load that content, it'll look in your ~/ConLib/Custom folder for a user control called foo-productinfo.ascx. Note that the ConLib reference does not include the file extension. You still have to have the extension on the actual file or the server won't recognize it as a user control.
Incidently, you can add any ~/ConLib/Custom/ user control to an existing AC7 page using this exact same technique. If fact, you can even add the pre-built AC7 controls located in ~/ConLib to other AC7 pages or your own pages.
Step 4: Add the URL to your menu
Whatever menu system your site uses, you need to add ~/foo.aspx to it. You're going to need to hit that page in the next step.
Step 5: Load the new page
The empty page we copied, foo.aspx, contained one control that specifies all the AC7 layout parameters. But changing these never worked for me, so I have to manually set the page up in AC7 each time.
Pull up your store in Admin mode. Now click the Store button in the upper right. This will take you to your store with you logged into it as an Admin.
When your store appears, click the new menu option you added in Step 4 for your ~/foo.aspx page.
Step 6: Establish page layout
Once your new page loads, AC7 will complain the user control doesn't exist. That's swell, because it doesn't yet. Ignore it, we're only here to establish layout.
Since you've pulled up the store from the Admin screen, you have the View/Edit control at the bottom of the page. Set it to edit so you can change all the page sections. Set each page layout, content, sidebars and header/footer options you want. Click Apply when you're done. Now the page is starting to look good. Don't close this page, you're going to need it for testing.
Step 7: Make your user control
I use Visual Web Developer 2005 Express for my work. Start building your control, being sure to save it in the ~/ConLib/Custom folder.
Remember leaving that page open in Step 6? Well, now you can test your control without a complete site recompile. Just save the control in VWD and hit refresh on the page. The page will update to reflect the changes you've made.
If you need code debugging, well there's no avoiding a recompile. AC7 is huge so a full recompile takes a little time, be patient.
That's it. You've built a new page, laid it out according to your existing site requirements and integrated a custom user control. You have access to all the same objects, containers, collections etc that AC7 uses within the code of your user control. Just be sure to add the necessary includes as required.
I'll try to make a separate post on how I migrated old .aspx web pages into user controls for AC7.
Feel free to post if I've made an error in this document. I'll make whatever revisions necessary.
Most sites will have some sort of custom menu component, as mine does. So the end result URL will be need to be added to your menu structure. If you are wanting something added to the header or footer links, just add a link to your page in the appropriate header/footer content page under Website/Content and Layout in the Admin screen.
Step 1: Make a blank page
Start by creating a new web page. For this example, we'll use foo.aspx as our file name. In the root of the AC7 site there will be a generic blank page called webpage.aspx. Copy that file to foo.aspx. We'll work with foo.aspx from now on. Your page has all the starting elements needed by AC7, but AC7 doesn't know how you want it laid out.
Step 2: Create an AC7 layout
Go in to your Admin screen. Select Website/Content and Layout. Create a new Content page and call it something you like. I preface all mine with my company name so they're grouped together when sorted by name. Let's call ours "Foo Product Info". Don't save it yet, we have a change to make since it contains nothing so far.
Step 3: Populate the layout
Since the user control we are making will be handling design layout, I don't do any design layout (tables, html etc) here. All you need to do is tell AC7 to reference the user control you've created. In the content section of the new entry we've created, simply put one line that says [[ConLib:Custom\Foo-ProductInfo]]. That's it, save it. Now whenever AC7 is told to load that content, it'll look in your ~/ConLib/Custom folder for a user control called foo-productinfo.ascx. Note that the ConLib reference does not include the file extension. You still have to have the extension on the actual file or the server won't recognize it as a user control.
Incidently, you can add any ~/ConLib/Custom/ user control to an existing AC7 page using this exact same technique. If fact, you can even add the pre-built AC7 controls located in ~/ConLib to other AC7 pages or your own pages.
Step 4: Add the URL to your menu
Whatever menu system your site uses, you need to add ~/foo.aspx to it. You're going to need to hit that page in the next step.
Step 5: Load the new page
The empty page we copied, foo.aspx, contained one control that specifies all the AC7 layout parameters. But changing these never worked for me, so I have to manually set the page up in AC7 each time.
Pull up your store in Admin mode. Now click the Store button in the upper right. This will take you to your store with you logged into it as an Admin.
When your store appears, click the new menu option you added in Step 4 for your ~/foo.aspx page.
Step 6: Establish page layout
Once your new page loads, AC7 will complain the user control doesn't exist. That's swell, because it doesn't yet. Ignore it, we're only here to establish layout.
Since you've pulled up the store from the Admin screen, you have the View/Edit control at the bottom of the page. Set it to edit so you can change all the page sections. Set each page layout, content, sidebars and header/footer options you want. Click Apply when you're done. Now the page is starting to look good. Don't close this page, you're going to need it for testing.
Step 7: Make your user control
I use Visual Web Developer 2005 Express for my work. Start building your control, being sure to save it in the ~/ConLib/Custom folder.
Remember leaving that page open in Step 6? Well, now you can test your control without a complete site recompile. Just save the control in VWD and hit refresh on the page. The page will update to reflect the changes you've made.
If you need code debugging, well there's no avoiding a recompile. AC7 is huge so a full recompile takes a little time, be patient.
That's it. You've built a new page, laid it out according to your existing site requirements and integrated a custom user control. You have access to all the same objects, containers, collections etc that AC7 uses within the code of your user control. Just be sure to add the necessary includes as required.
I'll try to make a separate post on how I migrated old .aspx web pages into user controls for AC7.
Feel free to post if I've made an error in this document. I'll make whatever revisions necessary.
... thanks!
