umApp 13.3.2

umApp

umApp provides a quick and easy way for developers and digital agencies to create a mobile app version of your Umbraco website.

Table of Contents

• Installation
• Usage
• Document Types

Installation

After installing the package, to start using umApp you need to add the following configurations to your Startup.cs.

public void ConfigureServices(IServiceCollection services)
{
    services.AddUmbraco(_env, _config)
        .AddBackOffice()
        .AddUmApp()  // add this line 
        .AddWebsite()
        .AddDeliveryApi()
        .AddComposers()
        .Build(); 
    services.AddUmApp(_config);  // add this line
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
      app.UseDeveloperExceptionPage();
    }

    app.UseUmbraco()
        .WithMiddleware(u =>
        {
            u.UseBackOffice();
            u.UseWebsite();
        })
        .WithEndpoints(u =>
        {
            u.UseInstallerEndpoints();
            u.UseBackOfficeEndpoints();
            u.UseWebsiteEndpoints();
        });
    app.UseUmApp(); // add this line
}

You also need to make sure that you enable DeliveryApi in your appsettings.json:

{
  "Umbraco": {
    "CMS": {
      "DeliveryApi": {
        "Enabled": true
      },
    }
  },
}

Now you are ready to run your project.

Usage

You can find our plugin under the Settings tab, there are three steps that you must follow to generate a mobile app:

• API Key To begin, it's essential to obtain an API key for your company in order to make requests to our API. You can acquire the key by following the provided link on the plugin or by clicking here to register your account. Upon email validation, you can log in to view and retrieve your API key. Finally, input the key in the designated box to set it as your new API key.

• Content In this step, your task is to create all necessary document types, data types, and content required to organize the structure of the mobile app. Once generated, you won't need to repeat this action. Moreover, all the generated content will be secured and cannot be deleted unless you uninstall our plugin. By navigating to the Content section, you'll notice a new entry labeled "umApp" with the corresponding document type "umApp." This is where you'll configure your mobile app and add the appropriate connections to your existing content. For detailed explanations on each document type, refer to the subsequent section titled Document Types.

• Generate App Finally, you're ready to generate your new app using the configuration you've set up in the Content section. This action will initiate our pipelines, and you can monitor their progress in the My Apps tab. Once the process is finished, you'll be able to download the source code of your application.

Document Types

umApp

The "umApp" document type is the core structure that represents your mobile application within Umbraco. Below is an elaborate description of its properties and functionalities:

• Primary Color: Specifies the primary color theme used throughout the app.
• Secondary Color: Specifies the secondary color theme utilized in the app.
• Accent Color: Specifies the accent color used to highlight specific elements in the app.
• Icon: Specifies the icon displayed for the app.
• Login: Indicates whether the app requires user authentication or not.

Allowed document types:

• umAppPage
• umAppSplashScreen

umAppPage

The "umAppPage" document type serves as the fundamental building block for creating pages within your mobile application. It does not include any specific properties of its own. Instead, it serves as a container for various content types that can be added to create the desired page layout.

Allowed document types:

• umAppCardsGrid
• umAppCardsList
• umAppCarouselCards
• umAppStoryCarousel
• umAppList
• umAppModal
• umAppNavigationButton
• umAppForm
• umAppDetail

umAppCardsGrid

This document type, "umAppCardsGrid," is designed to facilitate the creation and management of a grid layout for displaying cards within your mobile application. Below is a detailed overview of its properties and functionality:

• Source and Type: This property allows you to specify the data source and then you have to select the type for the cards displayed within the grid.
• Card Title: Defines the title of each card displayed within the grid.
• Card Image: Specifies the image associated with each card in the grid.
• Card Subtitle: Provides a subtitle or additional information for each card.
• Span: Indicates the number of columns or rows each card occupies within the grid. It is mandatory to define this property, and the value must be between 1 and 4.
• Orientation: Specifies the orientation of the grid layout, whether it is horizontal or vertical.
• Navigation Picker: It allows for a node of type "umAppPage" to be select, in order to create a navigation to that page.

umAppCarouselCards

This document type, "umAppCarouselCards," is designed to facilitate the creation and management of carousel cards within your mobile application. Below is an overview of its properties and functionalities:

• Source and Type: This property enables you to specify the data source and select the type for the cards displayed within the carousel. - Card Title: Specifies the title for each card displayed within the carousel. - Card Image: Defines the image associated with each card in the carousel. - Card Subtitle: Provides additional information or a subtitle for each card within the carousel. - Navigation Picker: It allows for a node of type "umAppPage" to be select, in order to create a navigation to that page.

umAppCardsList

The "umAppCardsList" document type is designed to simplify the creation and management of card lists within your mobile application. Below is an overview of its properties and functionalities:

• Source and Type: This property facilitates the specification of the data source and selection of the card type to be displayed within the list.
• Card Title: Defines the title for each card listed.
• Card Image: Specifies the image associated with each card in the list.
• Card Subtitle: Provides additional information or a subtitle for each card listed.
• Navigation Picker: It allows for a node of type "umAppPage" to be select, in order to create a navigation to that page.

umAppList

The "umAppList" document type is designed to simplify the creation and management of lists within your mobile application. Below is a overview of its properties and functionalities:

• Source and Type: This property enables you to specify the data source and type for the items displayed within the list.
• Item Text: Defines the text or title for each item listed.
• Item Icon: Specifies the icon associated with each item in the list.
• Navigation Picker: It allows for a node of type "umAppPage" to be select, in order to create a navigation to that page.

umAppStoryCarousel

The "umAppStoryCarousel" document type is created to simplify the management and presentation of story carousels within your mobile application. Below is a description of its properties and functionalities:

• Source and Type: This property enables you to specify the data source and type for the stories displayed within the carousel.
• Story Image: Specifies the image associated with each story in the carousel.

umAppNavigationButton

The "umAppNavigationButton" document type is specifically designed to facilitate the creation and management of navigation buttons within your mobile application. Below is an explanation of its properties and functionalities:

• Button Label: This property enables you to define the label or text displayed on the navigation button.
• Navigation Picker: It allows for a node of type "umAppPage" to be select, in order to create a navigation to that page.

umAppModal

The "umAppModal" document type is specifically designed to facilitate the creation and management of modal buttons within your mobile application. Below is an explanation of its properties and functionalities:

• Modal Title: This property defines the title of the modal.
• Modal Body: This property specifies the content or body text displayed within the modal.
• Cancel: This property represents the label for the cancel button within the modal.

Allowed document types:

• umAppModalButton

umAppModalButton

The "umAppModalButton" document type is specifically designed to facilitate the creation and management of modal buttons within your mobile application. Below is an explanation of its properties and functionalities:

• Button Label: This property enables you to define the label or text displayed on the navigation button.

umAppSplashScreen

The "umAppSplashScreen" document type is designed for managing the splash screen of your mobile application. Below is a description of its properties and functionalities:

• Image: This property allows you to select an image to be displayed as the splash screen when the application is launched.

umAppForm

The "umAppForm" document type is designed to facilitate the creation and management of forms within your mobile application. Below is a overview of its properties and functionalities:

• Source and Type: This property enables you to specify the data source and type for the form.
• Button Submit Label: This property allows you to name the submit button of your form.

umAppDetail

The "umAppDetail" document type is designed to create a detail section. Below is a overview of its properties and functionalities:

• Source and Type: This property enables you to specify the data source and type for the detail.