Updated Wiki: Home

Project Description
Mobile Pack for EPiServer CMS is a one-size-fits-all generic mobile web app, that will let you easily add a mobile web app to any web site running on EPiServer CMS 6 R2 (or later).
It's based on JQuery Mobile and can reuse content from the entire site.

EPiServer CMS 6 R2 RTM REQUIRED

Go Mobile
Mobile Pack is a set plugins for EPiServer CMS along with a fully featured sample mobile web site that can easily be adopted to your mobile needs. With this set of page types, templates, dynamic content elements and other code for EPiServer CMS 6 Release 2 (http://www.episerver.com), you can create your own mobile web app on top of EPiServer CMS in no time!
It's built using jQuery Mobile (http://jquerymobile.com), jQuery, Google Maps, Photoswipe and HTML5.

Update 1.0 Released http://www.frederikvig.com/2012/02/open-source-mobilepack-version-1-0/

See screenshots here.



Try it live, now
You can try it live by browsing to this url on your smartphone or web browser: http://demo.episerver.com. It will automatically redirect you if you are browsing from a mobile device.
You can also see it through an online iphone emulator.

Get it through NuGet
You can install it directly through NuGet as it is available on the EPiServer NuGet. Read more on http://nuget.episerver.com/.

Requirements and Installation
EPiServer CMS 6 R2 is required. You can always download the latest EPiServer software from http://world.episerver.com
Typically you will want to customize your mobile web app, so in many cases it makes most sense to get the latest changeset of the source code directly. However you can also install the runtime files directly on an existing web site with the downloadable EPiServer Module. NuGet packages are coming soon!

In order to install the source code directly, download it and extract the files to the root of your web site. There is a VS2010 project available you can open.
Make sure you import the pagetypes and pages in MobilePack.episerverdata after you copy the files.

Contents & usage

• 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, select iphone web app loading and icon images 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 Animation Link.Will let you insert a button that opens up any page - with an animation.
• MobilePack Phone Button.This is a shortcut button you can set up to let people automatically dial a number when clicking the button.
• MobilePack Collapsible Content. This is a Dynamic Content making it easier to hide and show certain data.
• Preview.When you are previewing the mobile site in edit-mode you can select which resolution to preview it in and using which phone with a phone image around the dimensionsl - 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.
• Google Maps Page Type. Showing location on a google map - making it easy for you to have a find us feature.
• Detecting mobile location. The Google Maps Page Type has the functionality of using the user locations to see locations closer to the visitor
• Image Gallery. Being able to show an image gallery with swipe functionality. Place the images in either the pagefiles folder or a specific folder