Allan Thraen
Apr 1, 2011
  10932
(2 votes)

Mobile Pack for EPiServer CMS

c1I just started a new Open Source project on codeplex that shows just how easy it is to create a mobile web app with jQuery Mobile and EPiServer CMS. It’s a 1-size-fits-all set of templates that you can use to setup your own mobile web app in a matter of minutes – reusing a lot of content from your regular web site. I know we already have many happy customers using their CMS as the platform for various mobile sites and apps – but at the same time I figured this could be a great demo example (not to mention a place for me to become more familiar with HTML5 and jQuery Mobile).

It handles stuff like redirection, previewing, mobile functionality, etc:

  • MobilePack Mobile Site.This page type and template should always be the foundation of any mobile web app built with MobilePack. This is where you select the theme of your app, define contents of the start page, setup the footer menu and so on.
  • MobilePack Standard Page. This is the default mobile page. It will be loaded through AJAX into the web app - and it can display it's main body, an Xform - or any of the MobilePack dynamic Contents controls you put in it. You can also set it up to "Fetch Data from Other Page in EPiServer CMS" in order to reuse content - or simply use the Dynamic Content element that lets you display individual properties from other regular pages on the site.
  • Link handling. You can use Dynamic Content to make buttons that will AJAX load mobile pages - or you can insert regular links to the rest of the site that will load in the usual way.
  • Image Resizing. Any images in your content with a width that's greater than the device width will automatically be rescaled (client-side for now) to fit the device resolution.
  • Swipe navigation.When reading a mobile page, you can swipe left or right to move between sibling pages.
  • MobilePack ListView.If you insert the Dynamic content element called "MobilePack ListView" you'll get a nice looking mobile menu that list all child-pages.
  • MobilePack Button.Will let you insert a button that opens up any page - including ajax loading of mobile pages - either loading the page in a dialog or regularly.
  • MobilePack Phone Button.This is a shortcut button you can set up to let people automatically dial a number when clicking the button.
  • Preview.When you are previewing the mobile site in edit-mode you can select which resolution to preview it in - in order to get an idea of how it will look on a mobile device. There are currently some problems with this functionality in Internet Explorer - Firefox is recommended
  • MobilePack Site Connect.You can easily expose any part of your existing web site on your mobile app - just setup the "site connect" page and define the starting point.
  • Browser Criterion. By using the new Browser Criterion, you can use the new personalization feature, Visitor Groups, in CMS 6 R2 to identify visitors coming from mobile browsers.
  • Visitor Group Redirection Rules. Using personalization you can setup redirection rules - to for instance redirect mobile users from your regular web site to the mobile web app.
  • So far it’s just a small alpha release – but with your help, perhaps we can take it further!

    Check out http://mobilepack.codeplex.com/

    Apr 01, 2011

    Comments

    Apr 1, 2011 05:31 PM

    Awesome.

    Apr 2, 2011 02:27 AM

    This is great! Thanks!

    Apr 5, 2011 06:32 PM

    Getting some great results, really quickly using this. I'm hopeful the client will go for this as a solution!

    Jonathan Sewell
    Jonathan Sewell Jun 22, 2011 03:48 PM

    I can't seem to get the redirection to work. I've set up the start page of my site to redirect the mobile visitors group to the mobile home page, but it's not playing ball. I'm using http://testiphone.com and Firefox user agent switcher to try emulate an iPhone. How did you get the redirect to work with the emulator?

    MuraliKrishna@websynergies.biz
    MuraliKrishna@websynergies.biz Jul 13, 2011 12:47 PM

    Hi,
    I installed the Mobile Pack, but it is showing a lot of errors regarding to namespaces......anyone face this type of problem?

    MuraliKrishna@websynergies.biz
    MuraliKrishna@websynergies.biz Jul 14, 2011 06:51 AM

    Hi Jonathan,

    If i copied all the files in MobielPack to the root of my website.and tried to open DefaultDemo.aspx to view it is browser......it is displaying this type of error
    [
    Could not load type 'EPiServer.Templates.DefaultDemo'
    ]
    Can u figure it out ?

    Chris Klug
    Chris Klug Aug 24, 2011 04:31 PM

    The redirect doesn't work for iPhone for a pretty simple reason. The enum BrowserType has the iFruit entries with capital i, that is IPhone, IPod, but the actual user-agent uses lower case as far as I know...

    Switching to capital i in my user-agent gets the redirect to work...

    Allan, sorry for being a pain in the "you know what", I know you thought you got rid of me, but could you please update...

    Please login to comment.
    Latest blogs
    Optimizely community meetup - Sept 29 (virtual + Melbourne)

    Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

    Ynze | Sep 27, 2022 | Syndicated blog

    Preview multiple Visitor Groups directly while browsing your Optimizely site

    Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

    Allan Thraen | Sep 26, 2022 | Syndicated blog

    The Report Center is finally back in Optimizely CMS 12

    With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

    Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog

    Dynamic Route in ASP.NET Core When MapDynamicControllerRoute Does Not Work

    Background Creating one of the add-on for Optimizely I had to deal with challenge to register dynamically route for the API controller. Dynamic rou...

    valdis | Sep 25, 2022 | Syndicated blog