Create an app for Umbraco with uMobile

Create an app for Umbraco with uMobile

By | | Umbraco , uMobile

uMobile --- is an Umbraco package and a mobile application that allows you to bring Umbraco's content and functionality to your customer's pocket.

Once you have installed the Umbraco package and the mobile app you can start by registering your Umbraco site in the application. After registration you will see the content of the admin category and a list of built-in categories on the side menu. These are Admin, Content, Member and Media—which we have been hard at work on lately at LECOATÍ.

login_221x355.jpg             categories_221x355.jpg

The advantage of uMobile, besides monitoring and administering your Umbraco instance from your mobile phone, is the ability to create your own custom categories and methods to do whatever you want.

To create a uMobile category for your site you have to add a C# class that:

1. Has to be visible from the uMobile assembly. You can place it in the App_Code folder or inside a class library project compiled and residing in your Umbraco bin folder.

2. Has to be a subclass of uMobile.

3. Is decorated with the umClass attribute.

using lecoati.uMobile;
using lecoati.uMobile.umCore;
using lecoati.uMobile.umComponents;

[umClass(Category = "Admin", Icon = Generic.Cogs)]
public class umAdmin : uMobile
{
    [umMethod(Title = "Users", Subtitle = "Users manager", Icon = GenericIcon.User)]
    public static string Users() {
        return string.Empty;
    }
}

4. To make your methods available on the mobile phone you have to decorate them with the umMethod attribute.

You can implement pretty much anything that Umbraco's back office offers, using Umbraco API to retrieve content, access the database or make calls to an external API.

All the uMobile category methods have to return a JSON string in order to be consumed by the mobile app. To do so you will use the umGo() extension method on uMobile's supported types (List, Form, HtmlView, MessageBox, Anonymous Object).

Here is a sample category method that displays a list of users. On tapping a user their details are shown.

[umMethod(Title = "Users", Subtitle = "Users manager", Icon = GenericIcon.User)]
public static string Users()
{
    List calls = new List();
    umbraco.BusinessLogic.User[] users = umbraco.BusinessLogic.User.getAll();

    foreach (umbraco.BusinessLogic.User u in users)
    {
        string[] param = new string[] { u.Id.ToString() };

        calls.AddListItem(new ListItem(u.Name,
            subtitle: "Type: " + u.UserType.Alias,
            icon: GenericIcon.User,
            action: new Call("UserDetail", param)));
        }

        return calls.UmGo();
}

This is how it looks like:

users_221x354.jpg

If you want to learn more about adding functionality to uMobile take a look at the video section on the uMobile site.

If you want to try uMobile out you can get it from the project page over at the Umbraco community site. It is compatible with most Umbraco versions starting at 4.7 and also the new and outstanding Umbraco 7.

About us

We are based in Barcelona and specialize in medium and large Umbraco projects. We offer our experience, method and commitment to achieve the success of every project. We have been an official Umbraco partner since 2011.

All Categories