Hi! Carole Bennett again, with Part 2 of “Creating a Custom MojoPortal Solution”. Today, we’ll talk about one of the biggest reasons for using a source code installation of MojoPortal – the ability to add custom code and features.

I won’t re-hash Joe Audette’s “Building a Guestbook” video series that gives you a step-by-step tutorial on building a custom app, though I’m happy to answer questions regarding anything I have covered today. Instead, I’ll show you what you can do after you have built a custom module.

We’ll start with opening up the solution we were working on last time. If you will remember, we’ve downloaded the latest source code, set up a local database, and created a solution that we have given a name specifically for this project. Click the small triangle circled on the image (click on the image to enlarge it) or press F5 to start the build in debug mode.

Step 1: Open the Solution

MojoPortal is designed to determine the status of an install, and if certain elements are not present, it will run the MojoPortal setup automatically.

Step 2: Run the MojoPortal Install

After the MojoPortal setup is complete, you’ll see the lovely default skin, as shown here. Later on, we’ll choose a skin closer in layout to the one we plan to implement for this project. Up to this point, everything you’ve seen is pretty much the same as the “out of the box” installation.

Step 3: View the Default Page

However, this is where things start to get a bit more interesting. I’m copying over three projects that comprise my custom Ad Management module that I’ve written for MojoPortal. In the not-too-distant future, I will be converting it to a deployable, but that’s for another entry.

Step 4: Adding Custom Projects

After we’ve added the project folders to the solution folder, we go in through the Visual Studio Solution Explorer to add the projects to the solution.

Step 5: Adding Projects to the Solution

After the projects have been added to the solution, it’s time for F5, to compile the solution with the added projects.

Step 6: Compiling with Added Projects

In order to make sure the new features added to the MojoPortal installation work, we manually re-run the “setup/default.aspx”, which will run the scripts that add the requisite elements (database tables/stored procedures, resources) for the feature to work.

Step 7: Manually Running the MojoPortal Setup

Here, you can see that the new module is visible in the Page Edit section – easy as pie to add to the page and configure.

Step 8: Using the New Custom Module

Here’s a screenshot of the edit screen for the custom Ad Management module; there’s more “behind the scenes”, but again, we’ll save that for another time.

Step 9: The Custom Module In Action

Here’s the custom module in the page. Custom modules can be set up to leverage existing settings, or completely custom attributes; it’s a wonderful way to be able to re-use functionality.

Step 10: Custom Module In the Page

Now, I’m sure you noticed that I switched to a different skin; it’s not the skin I am going to design for this project, but it does have certain layout features that I will leverage in an upcoming design. Next time, we’ll go into why choosing a similar skin is good, and how to implement a completely customized UI for our project.  Now I’m off to design a UI – see you next time!

Looking for quality mojoPortal Hosting? Look no further than Arvixe Web Hosting.