Building your first app manifest

In the previous step, you created your new demo app using a placeholder app manifest. In this step, you'll learn how to create a functional app manifest, then upload it to your demo app on the Uberflip Marketplace.

Building an app manifest: the basics

The app manifest provides the framework for your Uberflip app. You use it to create functionality in the Uberflip platform, such as adding navigation buttons, creating and applying permissions, injecting code snippets, and so on. An app manifest can be a basic app all by itself, or it can be used to integrate an externally hosted app by specifying where in the Uberflip interface it appears, and how users can interact with it.

In practical terms, an app manifest is basically a JSON file that contains one or more predefined objects. A number of different objects are available, and each one creates a particular type of functionality in Uberflip.

Building an app manifest is a simple process: just decide which objects your app needs, place them into your manifest, and configure them as necessary. Each object has a range of properties, and you set these properties to define how the functionality created by that object will work.

Create a basic app manifest

The demo app you'll build in this tutorial will do two things: allow a user to type in a Google Tag Manager Container ID; and insert the user-defined ID into a code snippet, then inject that snippet into an Uberflip Hub's HTML. You'll create all the necessary functionality to do this using just the app manifest.

Begin by setting up the basic structure of the app manifest. There are a number of different objects available, but for this tutorial, you'll only need these two:

• The account_code_blocks object: This object allows your app to inject HTML/CSS/JS into an Uberflip Hub. For this demo app, you'll use it to inject a Google Tag Manager snippet.
• The config_fields object: This object allows you to create user-definable app settings in the Uberflip web app (or "Hub backend") for your app. Here, you'll use it to create a text box that accepts a Google Tag Manager ID.

1. Open up your text editor.
2. First, add the account_code_blocks object:

{ 
    "account_code_blocks": [{
        "code": "",
        "name": "",
        "content": "",
        "placement_code": "",
        "description": ""
    }]
}

3. Next, add the config_fields object:

{ 
    "account_code_blocks": [{
        "code": "",
        "name": "",
        "content": "",
        "placement_code": "",
        "description": ""
    }],
    "config_fields": [{
        "code": "",
        "name": "",   
        "ordinal": 0,
        "label": "",
        "category": "",
        "control_type": "",
        "scopes": "",
        "description": ""   
    }]      
}

Configure the app manifest objects

You can see that both of the objects you added to your manifest each have a number of properties. All of the properties are empty at the moment, so your next step is to configure the objects for your demo app by filling in the appropriate values.

Right now, you don't need to worry about how all of the properties work, or how to configure them — for this demo app, we'll provide the appropriate values to you.

📘

App Manifest Objects & Properties

After you've finished this tutorial, go to the Building App Manifests guide to learn about the available objects and how to use and configure them.

1. Complete the objects in your app manifest with these values:

{
    "account_code_blocks": [{
        "code": "_GTM_SNIPPET",
        "name": "Google Tag Manager Script",
        "content": "<!-- Global site tag (gtag.js) - Google Analytics --> <script async src='https://www.googletagmanager.com/gtag/js?id={{gtm_id}}'></script>",
        "placement_code": "BODY_BOTTOM",
        "description": "Google Tag Manager snippet"
    }],
    "config_fields": [{
        "code": "_GTM_ID",
        "name": "gtm_id",
        "ordinal": 0,
        "label": "Google Tag Manager ID",
        "category": "integrations",
        "control_type": "textbox",
        "scopes": ["hub", "account"],
        "description": "Enter your  Google Tag Manager ID"
    }]
}

2. Save your app manifest as a JSON file. Name it something like "demomanifest.json".

👍

How does this manifest work?

You can probably figure out what most of the properties and values do just by reading through the manifest. Here are a few notes on some of the things that might not immediately clear:

• "account_code_blocks":"code"
  This is a code that Uberflip uses to uniquely identify specific objects (it works the same way on the config_fields object).
• "account_code_blocks":"content"
  This contains the code snippet that this object will inject when the app is installed on an Uberflip Hub.
• "account_code_blocks":"placement_code"
  This is a predefined value that tells the platform where to inject the code (from the content property) — in this case, the bottom of the HTML element.
• "config_fields":"name"
  This is the name of the config field — but it's not the label that appears beside that field. Instead, it's used to reference this field in the account_code_blocks object. In this case, it lets you insert the user-entered value from the config field into the {{gtm_id}} placeholder in the code snippet injected by the account_code_blocks object (see the content property).
• "config_fields":"scopes"
  Config fields in the Uberflip platform can be scoped so that the setting is configurable only for a Hub, only for an entire account (and all Hubs it contains), or (as here) both.

Upload the app manifest to the demo app

Now that you have your functional app manifest, you can use it to replace the placeholder app manifest you used to register the demo app earlier.

1. Go to https://marketplace.uberflip.com/ (log in again if you're currently logged out).
2. Click on Developer in the top right. You should see your My Apps page.
3. Your Tutorial Demo App should be listed here. Click on the three-dot ("meatball") menu button beside it on the right:

4. In the menu, click on Edit. The admin page for this app will open.
5. Scroll down to Manifest.
6. Click on Browse Files and upload the new app manifest you just created (i.e. demomanifest.json).
7. Wait for the upload to finish, then scroll down and click on the Save button.
8. Like before, click on the Save as Draft option in the prompt that appears.

👍

Note

Uploading a new app manifest to an app's Marketplace listing is also how you update an app. Each time you upload a new manifest, this represents a new version of your app. As a result, any users who had previously installed your app would see an Update button on its Marketplace listing page.

--

You've just built your first functioning app manifest. In the next step, you'll install and test it in your developer account to make sure it's actually working.