Creating Your First Arena Template – Part 4Comments

Alright Mr. or Ms. Big Shot, you’ve done it.  You’re rightfully proud of yourself and you’re ready to reap the rewards of your efforts.  Let’s get back into Visual Studio and make some magic happen.

Up until this point, we’ve yet to actually run Arena.  Truthfully, there’s been no need to up until now.  So let’s do a couple things real quick and then we’ll build and run our SDK.  Look back in the right side of Visual Studio under Solution Explorer.  Until now we’ve existed solely in the Templates folder but there’s one thing we need to do to get our SDK to load correctly.  Scroll down past all the folders and look for a file called “default.aspx”.  Right-click that file and select “View in Broswer”.  What we’re doing here is telling Visual Studio that once it builds our SDK, we’d like it to open to our default.aspx.  Nothing more, nothing less.

This will take a moment but eventually, an Internet Explorer window should open that will look just like your production Arena installation.  If you haven’t actually done this before, there will be some installation steps you’ll need to click through that will setup Arena for the first time.  This will include the all-important creation of your Admin user.  DO NOT FORGET THIS USERNAME/PASSWORD!

Once you get through that and log in, you’ll be looking at your standard Arena interface complete with several menu options down the left side of the page. Until now, you’ve probably never ventured far enough down the page to where the Administration section is.  Do that now and expand it.  About ten options down, you’ll see “Templates”.  Click that and the right side should load showing all installed Templates on our SDK.

By now I’m sure you’ve noticed that our Demo template isn’t showing and you’re probably assuming that you’ve done something wrong and you knew all along that this wasn’t going to be as easy as I promised.  Truth be told, you’re template isn’t here because we haven’t told Arena about its existence yet.  So look to the bottom of the list of templates and you’ll see a link for “Add New Template”.  Go ahead and click that.

Now at the top of the templates list, you’ll see “[New Template]” and on the right side, we’ll have the option to “Edit Details”.  Click on “Edit Details” now which will bring up a screen where we can assign a name, url, and description to our template. For the name, let’s call it “Demo Template” and for the URL, let’s put this:

~/templates/Demo.ascx

For the description, you can put whatever you like.  Try to make it descriptive for the next person to know exactly what template it is.  Once that’s complete, click update and you’re finished.  Arena now knows about our template and is patiently awaiting us to add a page to apply the template to.

To do that, we need to go back to the left menu and find Pages under Administration.  Once in there, expand “Web Pages” and then expand “Homepage”.  Since this is a demo and our rookie attempt at creating a template, let’s not go getting too confident and applying it to the homepage.  Instead, let’s left-click the Homepage folder.  Then on the right, click the tab labeled “Child Pages”.  Look to the bottom and click the icon that has a green plus sign and an image of a page.  This will add a new page to our list.

At this point, you’ll probably get slightly spooked at the number of options there are on this page.  Relax.  We’re keeping it simple for now. The very first option is “Template”.  For that, let’s go ahead and select “Demo Template” from the dropdown and click update.  Now we’ve got a page and just need to add our module to it.  Look for the tab labeled “ContentCell Content” and click that.  Next, click “Add” to add a module.  You’ll see that Arena loads the Advanced Text HTML module by default.  Now click where it says “New Module” and we can edit our module.

Under “Title”, let’s change that from “New Module” to something like “My First Module”.  Finally, scroll to the bottom and look for the “Details” textbox.  In this textbox, let’s put “Hello World!” and save our changes.

We’re now ready to take a look at our handywork.  The URL you’re now looking at will look something like this:

http://localhost:2380/Arena/default.aspx?page=34&pageid=3250

Where it says page=34, that is referencing the internal Arena page that we’re using to create our demo pages.  Where it says pageid=3250, that’s the page we just created.  So, to view the page we just created, we need to open the following URL:

http://localhost:2380/Arena/default.aspx?page=3250&refreshcache=true

This URL will open the page we just created and we can see how it would appear to anyone else.  Also, note the use of the “refreshcache=true”.  This is essentially telling Arena to show me the page straight from the database and not from the cache.  If you view the page from the cache, it may not have our newest module on it yet, so we’re manually telling Arena to invalidate the cache and redraw it so it will include our new module.  Go ahead and go to your new URL.

Voila!  I know, I know…. that’s it?  Well yeah, that’s it.  Sure it’s a plain white page with “Hello World” and nothing else.   But don’t lose site of the forest for the trees here.  You have now gone from nothing to something very big.  You’ve installed Visual Studio and the Arena SDK, created a template from scratch working in .ascx and .cs files, installed the template, created a page, and added your first module to a page!  Now you’ll notice you can also click the pencil icon on your new URL and edit the “Hello World!” text to be anything you like.

That brings us to the conclusion of this series.  You now have all the tools to build your very own Arena web portal.  All you lack at this moment is a great looking, well thought out design for your portal.  Once you’ve got that, you can identify where you want your content cells to be, which means you know where to put your placeholders.  Then you just do the plumbing from .ascx to .cs file for each placeholder and install the template!

Now that you’ve arrived at this point, the next area to focus on will the myriad of different modules available in the Arena system from modules that handle site navigation to the group locator modules to event registration.  Hey, at least now you’ve got the canvas to paint that masterpiece on.

Related posts:

1. Creating Your First Arena Template – Part 3
2. Creating Your First Arena Template – Part 1
3. Creating Your First Arena Template – Part 2
4. How to Build a Web Site Using Arena – Video
5. New Skin Preview Tutorial