Creating Adobe Launch Extension : Global Configuration

Julien PicciniAdobe Launch

In order to create the extension there are (usually) 2 things that you would like to setup in order to make the information working properly.

The 2 elements are the Extension JSON file that is in the root of your extension folder and the HTML layout of your Extension. We will review those 2 elements and how they are playing a part on the creation.

Extension.json

The Extension JSON file is the configuration file that tells the Launch system how this extension is being built. It will contain all of the information required for the extension to work.

You can modify this configuration file yourself and add (or remove) any information that you wish. It should have been pre-filled with the information that you have entered when using the scaffold module. (see the related article)

Based on that file, the Launch engine will define what type of module is contained in your extension and if there has been any update between 2 upload of your extension. You can also define the name of your extension name there. The name that you have used during the scaffold can be changed as long as you never imported your extension. After that, it would create a new extension.

Here is the global file configuration

1
2
3
4
5
6
7
8
9
{
  "displayName": "Complete Learning Extension",
  "name": "mycompany-complete-learning-extension",
  "platform": "web",
  "version": "0.0.1",
  "description": "This extension is designed in order to learn from the Adobe Extension builder.",
  "author": {
    "name": "Adobe Consulting - Julien Piccini"
  },//not the end !!!

Notice the displayName and the current name, they are different, as your name should not have any space. I also pre-fixed the name of my extension with “mycompany”. It is recommended to proceed so, as each name in the Launch extension catalog has to be unique, even for privately released extension. Therefore, in order to be on the safe side, using your company name should make sure that no one is already using your name.

The following elements are the one defining the modules you would like to include.
In my case it normally looks like :

1
2
3
4
5
6
7
8
9
10
11
12
13
"events": [
    {
      "displayName": "myEventCondition",
      "name": "myeventcondition",
      "schema": {// what is being passed by the event module in the configuration
        "$schema": "http://json-schema.org/draft-04/schema#",
        "type": "object",
        "properties": {}
      },
      "libPath": "src/lib/events/myeventcondition.js",
      "viewPath": "events/myeventcondition.html"
    }
  ],

The only difference comes when you want to include more than one option in your module type.
In my following example, I will create 2 Data Elements, therefore, it will look like this :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
"dataElements": [
    {// my first element
      "displayName": "my_local_storage",
      "name": "my_local_storage",
      "schema": {
        "$schema": "http://json-schema.org/draft-04/schema#",
        "type": "object",
        "properties": {}
      },
      "libPath": "src/lib/dataElements/my_local_storage.js",
      "viewPath": "dataElements/my_local_storage.html"
    },
    {// my second element
      "displayName": "my_session_storage",
      "name": "my_session_storage",
      "schema": {
        "$schema": "http://json-schema.org/draft-04/schema#",
        "type": "object",
        "properties": {}
      },
      "libPath": "src/lib/dataElements/my_session_storage.js",
      "viewPath": "dataElements/my_session_storage.html"
    }
  ],

More information about this manifest :
https://developer.adobelaunch.com/extensions/reference/extension-manifest/

Extension HTML

On top of this extension manifest, that you will need to configure. You have the possibility to give user some level of customization on your extension. This is done in the Extension Configuration HTML file.

It is usually where the user can set its account id or to provide any sort of information that is required for your extension to work.
It can also be that your user doesn’t have any information to provide. It is not mandatory to have a configuration view.

In my extension example below, I would set some basic information that I want my user to define.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Private Extension Configuration</title>
    <link rel="stylesheet" href="../global_config.css">
  </head>
  <body>
    <h1>Extension configuration</h1>
    <p>On this page we will configure the different elements for our extensions</p>
    <h2>Condition Setup</h2>
    <p>Please provide the name of your localStorage to check if Condition exists</p>
    <input id="condition"></input>
    <h2>Event Setup</h2>
    <p>Please provide the name of the event you would like to setup</p>
    <input id="event"></input>
    <h2>Action Setup</h2>
    <p>Do you want to display console.log() for your actions </p>
    <select id='action'>
        <option value=false>No</option>
        <option value=true>Yes</option>
    </select>
    <h2>Data Element Setup</h2>
    <p>I have specific query parameters key</p>
    <input id="dataElements"></input>
    <p></p>
    <script src="https://assets.adobedtm.com/activation/reactor/extensionbridge/extensionbridge.min.js"></script>
    <script>
      window.extensionBridge.register({
        init: function(info) {
          if (info.settings) {// TODO Populate form values from persisted settings.
            document.querySelector("#condition").value = info.settings.condition;
            document.querySelector("#event").value = info.settings.event;
            document.querySelector("#action").value = info.settings.action;
            document.querySelector("#dataElements").value = info.settings.dataElements;
          }
        },
 
        getSettings: function() {
          myObject = new Object();/*your setting will be return by this function, however it needs to return an object*/
          myObject['condition'] = document.querySelector("#condition").value;
          myObject['event'] = document.querySelector("#event").value;
          myObject['action'] = document.querySelector("#action").value;
          myObject['dataElements'] = document.querySelector("#dataElements").value;
          return myObject
          // TODO Return settings object from form values.
        },
 
        validate: function() {/*making sure that the value is not containing space (not possible in URL)*/
          queryParameter = document.querySelector("#dataElements").value;
          return queryParameter.indexOf(' ')==-1;
          // TODO Return true whether settings are valid.
        }
      });
    </script>
  </body>
</html>

I hope that this article helped you to understand how to globally configured the extension.

In this series of articles, you may want to look at these articles :

ArticleContent
Introdcution to Adobe Launch & Extension Creation This posts covers the basic of what you need to know in order to start with this series of articles.
Architecture and dependencies within modules This posts covers the architectures and how the different modules are linked between each others
Global Extension Configuration This article explains how to set up your configuration HTML file. It is the core configuration module of your extension.
Event type module This article will show you how to build an event module. Every module will have a configuration part (HTML) and wrapper(JS).
Condition module
This article will show you how to build a condition module.
Action module This post will be related to the action module and how to build it. We will also see how you can actually import some cool feature of the launch library.
Data Element moduleThis article will be developing the possibilities of the Data Element module
Shared moduleThis article will focus on the shared functionality that you can write and share with other extension developpers to used. We will also used a feature shared from Adobe Analytics to show you how to use it.
Other featuresThe other features that are related to Launch Extension. I will cover additional (and important) information there.
Testing your extensionHow do I debug my Extension ?
Releasing and updating your ExtensionHow do I publish my Extension into Launch ? And after, how do you update it ?

Leave a Reply

Your email address will not be published. Required fields are marked *