あなたのアドビ起動拡張のためにビューを構築してください

39929 ワード

This post is part of a series about auto-tagging

この記事では、アドビの起動機能拡張のビューの作成方法について説明します.拡張機能は、すべてのアドビ起動コンテナで使用するタグ付けチームの再利用可能なコンテンツを提供するために、タグ付けの実装を拡張する方法です.
プライベートまたはパブリック拡張機能を構築するときは、拡張機能や拡張機能の構成ビューを提供するオプションを指定します.構成を提供するのがオプションですが、私は常にこのオプションを選択することをお勧めします.
最良の練習として、データ要素や条件や規則や拡張モジュールを作成するときにビューを追加することをお勧めします.たとえあなたがAを返すつもりでないとしてもsettings オブジェクトは、ビューには、機能に関する追加の詳細を提供するために使用する必要があります.
今後は、次のコマンドを実行して、設定ビューに関する質問にyesと答えてください.

npx @adobe/reactor-scaffold

どのような足場コマンドを行う

我々が最初に我々の拡大の足場を生成するとき、あなたはそれに気がつきますsrc フォルダが自動的に私たちのために生成されます.このフォルダの中でlib and view フォルダ.
The view フォルダは、アドビ起動UIで使用されるすべてのHTMLファイルを含んでいるべきです.拡張機能がインストールされている場合は、Adobe Runningでは、アクション、データ要素などを使用することができます.あなたが設定したextension.json ファイル.アドビ起動インターフェイスのいずれかを選択すると、Adobe Runningは対応するHTMLファイルを取得し、それをIFrameにロードします.ビューの主な目的はsettings 次に、lib フォルダ.
すべてのファイルlib フォルダは、アドビの起動コアライブラリには、お客様のウェブサイトにロードされます.

Try to remove the .min from your Adobe Launch library URL and have a look. You will see the content of your js files inside it.

そのためには、CSSファイルやその他のヘルパーファイルをview フォルダ自体.この方法を使用するときnpx @adobe/reactor-packager コマンドは、自動的にジップされます.

ビューの構築

デフォルトでは、scaffoldコマンドはHTMLファイルにCSSを追加しません.それはあなたに最適(それゆえエクステンションの偉大な柔軟性)に合う任意のCSSフレームワークを使用することです.これは、あなたのブランドのデザインに合わせて拡張機能をカスタマイズできます.

Please note that while some public extensions available in Adobe Launch use Single Page Application framework like React to create the Views, you do not have to use any. I use default HTML, CSS and Vanilla JavaScript and it meets all my requirements.

デフォルトのHTMLコードはHTMLファイルに次のようになります.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Extension Configuration</title>
  </head>
  <body>
    Extension Configuration Template

    <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.
          }
        },

        getSettings: function() {
          // TODO Return settings object from form values.
        },

        validate: function() {
          // TODO Return whether settings are valid.
        }
      });
    </script>
  </body>
</html>

上の例ではExtension Configuration Template . このセクションは、必要に応じて任意のHTMLコードに置き換えることができます.あなたが同様にしたいスタイルをすることができます.通常、このセクションで設定フォームを配置します.
2つのスクリプトタグが表示されます.削除しないでください.最初のものはExtensionBridgeについてです.
次のスクリプトタグでは次のようになります.
検証する
この節では、設定されている設定値が最小要件に一致することを検証するロジックを作成する必要があります.必要なフィールドに値があるか、特定のフィールドが正しい値を含むかどうかをチェックする必要があります.常にbooleanを返します.true 妥当性検査が成功した場合、false 妥当性検査が失敗した場合に返されます.

validate: function() {
    return true;
}

getsettings
この関数はsettings ルールまたはデータ要素または条件または拡張用のJSファイルで使用される構成を含むオブジェクト.

getSettings: function() {
    return {
        test1: getValueFromField1(),
        test2: 123,
        test3: [1, 3]
    }
},

内部の検証ロジックを追加してはいけませんgetSettings セクション.The validate セクションはその代わりに使われるべきです.また、必ずあなたのJSファイルの中に対応する検証ロジックを持っているべきですsettings オブジェクトはあなたが期待通りです.
インプット
ビューが読み込まれたときに呼び出されます.既存のチェックsettings オブジェクトが存在します.存在する場合は、既存の構成でフォームを事前に設定できます.

init: function(info) {
    if (info.settings) {
        if (info.settings.test1) {
            test1Field.value = info.settings.test1;
        }
    }
},

設定ビューがすべての設定を返さない場合は、

window.extensionBridge.register({
    init: function(info) {},

    getSettings: function() {
        return {};
    },

    validate: function() {
        return true;
    }
});

ビューの独自のCSSとヘルパーを追加する

拡張モジュールをアップロードするには、まずパッケージをパッケージ化する必要があります.幸いにも、Adobeはすでにこのコマンドを提供します

npx @adobe/reactor-packager

CSSとヘルパーのJavaScriptファイルをパッケガーの出力ZIPファイルの一部にするには、view フォルダ.彼らが外にいるならば、Adobe Runningで見るHTMLファイルがロードするとき、利用できません.
また、あなたのヘルパーやCSSファイルを提供するCDNを使用することができます.HTMLファイルがIFrameにロードされるので、CDNに関連したどんな危険も軽減されなければならないと考えるのは安全でなければなりません.
我々の例では、Bulma CSSフレームワーク、イオンのアイコンといくつかのカスタムJavaScriptヘルパーファイルを追加します.

クリエイトcss フォルダ内のview フォルダ

クリエイトjs フォルダ内のview フォルダ

クリエイトhelpers フォルダ内のjs フォルダ

移動するBulma ウェブサイトとダウンロード最新のビルド.bulmaを配置します.CSSフォルダ内の

ファイルを追加viewHelpers.js インサイドjs/helpers フォルダ

    //Support selection of data element
    function addListenerToDataElement() {
        var dataElementSelectorElements = document.querySelectorAll('.data-element');

        if (dataElementSelectorElements) {
            dataElementSelectorElements.forEach(function (element) {
                element.addEventListener('click', function (event) {
                    window.extensionBridge.openDataElementSelector().then(function (dataElement) {
                        var target = event.target;
                        while (!target.classList.contains('field')) {
                            target = target.parentElement;
                        }
                        target.querySelector('.input').value = dataElement;
                    });
                });
            })
        }
    }

    addListenerToDataElement();

    //used when missing field
    function toggleNotification() {
        document.querySelector('#error').classList.toggle('is-hidden');
    }

フォルダ構造は次のようになります

    > src
        > view
            > actions
            > dataElements
            > configuration
            > events
            > css
                bulma.min.js
            > js
                > helpers
                    viewHelpers.js

HTMLファイルに移動し、CSSファイルとJavaScriptファイルを参照する

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Extension Configuration</title>
<link rel="stylesheet" href="../css/bulma.min.css">
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
</head>

<body>
    <section class="section is-hidden" id="error">
        <div class="notification is-danger is-light">
            <button class="delete" onclick="toggleNotification()"></button>
            <ion-icon name="alert" class="has-text-danger"></ion-icon> Error message
        </div>
    </section>

    <script src="https://assets.adobedtm.com/activation/reactor/extensionbridge/extensionbridge.min.js"></script>
    <script>
        window.extensionBridge.register({
        init: function (info) { },

        getSettings: function () {
            return {};
        },

        validate: function () {
            return true;
        }
        });
    </script>
    <script src="../js/helpers/viewHelpers.js"></script>
</body>

</html>

拡張機能、アクション、データ要素または条件を設定するフォームを追加する

HTMLファイルを表示すると、settings アクションまたはデータ要素または条件または拡張が実行されるときに使用する構成のオブジェクト.
提供するさまざまな方法がありますsettings :

入力フィールドを使用してハードコード化された値を提供できます

データ要素の参照を返すには、データ要素セレクタを使用できます.ランタイムでは、データ要素が評価され、正しい値が返されます.データ要素の値が% AS%myDataElement%

コードエディターを使用してJSONオブジェクトを返す

コードエディターを使用して、関数呼び出しの一部として実行されるJavaScriptコードを返します(変換が必要です)

現在、HTMLファイルにフォームの構造を追加します.

We will use the openDataElementSelector and openCodeEditor shared views to edit our code.

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Extension Configuration</title>
  <link rel="stylesheet" href="../css/bulma.min.css">
  <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
</head>

<body>
  <section class="section is-hidden" id="error">
    <div class="notification is-danger is-light">
      <button class="delete" onclick="toggleNotification()"></button>
      <ion-icon name="alert" class="has-text-danger"></ion-icon> Error message
    </div>
  </section>

  <section>
    <!--Normal field-->
    <label class="label">Normal Field</label>
    <div class="field">
      <div class="control is-expanded">
        <input id="normal" class="input" type="text" placeholder="Input a value">
      </div>
    </div>
    <!--Field with Data Element selection-->
    <label class="label">Data Element Selection field</label>
    <div class="field has-addons">
      <div class="control is-expanded">
        <input id="dataElement" class="input" type="text" placeholder="Click on icon to select your data element">
      </div>
      <div class="control">
        <a class="button is-info data-element">
          <span class="icon is-small">
            <ion-icon name="reorder"></ion-icon>
          </span>
        </a>
      </div>
    </div>
    <!--Button to edit JSON config-->
    <button class="button is-medium is-outlined is-info" id="edit-config" onClick="editConfig()">
      <span class="icon is-large is-primary">
        <ion-icon name="code"></ion-icon>
      </span>
      <span>Edit Config</span>
    </button>
    <!--Button to edit custom code-->
    <button class="button is-medium is-outlined is-info" id="edit-function" onClick="editFunction()">
      <span class="icon is-large is-primary">
        <ion-icon name="code"></ion-icon>
      </span>
      <span>Edit Function</span>
    </button>
  </section>

  <script>
    /**
     * Will open a code editor to edit the JSON value
     */
    function editConfig() {
      window.extensionBridge.openCodeEditor({
        code: window.config.source,
        language: 'json'
      }).then(function (code) {
        window.config.source = code;
      });
    }

    /**
     * Will open a code editor to edit the custom code
     */ 
    function editFunction() {
      window.extensionBridge.openCodeEditor({
        code: window.customCode.source,
        language: 'javascript'
      }).then(function (code) {
        window.customCode.source = code;
      });
    }
  </script>


  <script src="https://assets.adobedtm.com/activation/reactor/extensionbridge/extensionbridge.min.js"></script>
  <script>
    window.customCode = { source: '' } //Stores custom code to be displayed in code editor
    window.config = { source: '' } //Stores custom JSON config to be displayed in code editor
    var normal = document.querySelector('#normal'); 
    var dataElement = document.querySelector('#dataElement');

    window.extensionBridge.register({
      // We need to remember to prepopulate the config forms so we can edit saved data
      init: function (info) {
        if (info.settings) {
          if (info.settings.normal) {
            normal.value = info.settings.normal;
          }

          if (info.settings.dataElement) {
            dataElement.value = info.settings.dataElement;
          }

          if (info.settings.config) {
            window.config.source = info.settings.config;
          }

          if (info.settings.customCode) {
            window.customCode.source = info.settings.customCode;
          }
        }
      },

      //We will return a custom object that will be available in the settings object during runtime
      getSettings: function () {
        return {
          normal: normal.value,
          dataElement: dataElement.value,
          config: window.config.source,
          customCode: window.customCode.source
        };
      },

      validate: function () {
        return true;
      }
    });
  </script>
  <script src="../js/helpers/viewHelpers.js"></script>
</body>

</html>

関数部分については、プロパティを指定する必要がありますtranforms にextension.json ファイル.この場合、カスタムコードを関数に格納して実行できるようにします.既定では、コードエディターを使用するカスタムコードは、settings オブジェクト.
インサイド.JSONの追加transforms ビューのプロパティ

"configuration": {
    "viewPath": "configuration/configuration.html",
    "schema": {
        "$schema": "http://json-schema.org/draft-04/schema#",
        "type": "object",
        "properties": {}
    },
    "transforms": [{
        "type": "function",
        "propertyPath": "customCode",
        "parameters": ["window", "anotherArgument", "anotherOne"]
    }]
},

Notice that you can specify more than one transform action. In our case we are using a type of function on the settings property customCode. We also specify that the function can have 3 arguments when it is called.

拡張モジュールがアップロードされると、以前に設定した拡張モジュールまたはルールまたはデータ要素または条件に移動します.作成したフォームを参照してください.変更を保存するとsettings メインアドビ起動ライブラリが構築されたときにオブジェクトが保存されます.

Check the Adobe Launch library URL without the .min and you should see how the settings object is saved.

対応するJavaScriptファイルの設定オブジェクトを使用する

ScalFoldコマンドを使用してアクションまたはデータ要素または条件または拡張構成ビューを作成すると、次のようになります.

これは、対応するフォルダタイプのHTMLファイルを作成しますview フォルダ(e . e):アクションはactions フォルダ

これは、対応するフォルダタイプのJavaScriptファイルを作成しますlib フォルダ(e . e):アクションはactions フォルダ).ファイルは同じ名前を持つが、.js

更新するextension.json 使用するビューと対応するJSファイルを使用します.

Notice that by default the configuration view for the extension will not generate a js file. You will need to create one and reference it in the extension.js file in the main property.

JSファイルでは、いくつかのスケルトンコードが生成されます.

'use strict';

module.exports = function(settings) {
  // TODO Perform some action.
};

Conditions also have a trigger argument.

必ず含める引数を更新してくださいevent . それが所有するアドビ発射event あなたのコードで利用できるオブジェクト.ルールの種類についての詳細は、このアクションをトリガーするために使用されているが、それも提供していますevent.detail 直接呼び出し規則が引き起こされるとき、どちらがペイロードとして提供されるメタデータを含んでいますか.

_satellite.track('myDCR', { test: 123, prop1: ['a', 'b']})

追加せずにevent 引数は、このペイロードを失うでしょう.場合でも、使用する予定はありませんevent オブジェクトは、それを参照するにはまだ最高の練習です.省略した場合は、event objectは正しいデータを返しません.だから、それを使用する他の機能を参照します.

You can call a data element in the code using _satellite.getVar('myDataElement', event) and in the data element view you can leverage the event object using %event.detail.test%

コードは次のようになります.

'use strict';

module.exports = function(settings, event) {
  // TODO Perform some action.
};

前述のように、拡張設定構成ビューで保存されている設定はsettings オブジェクトは関数への引数として渡されます.あなたが使用する必要がありますturbine.getExtensionSettings() 拡張機能を使用して拡張機能を有効にします.これは拡張モジュールのJavaScriptファイルで使用できます.

結論

私は今、あなたの拡張のためのビューを作成し、使用する方法を説明しましたsettings コードで使用するように構成されています.独自のプライベート拡張機能を開発するときにタグ付けの多くの時間を節約できるようになります.
また、我々の標準の一部であるドライ原理に沿っています

Reference

この問題について(あなたのアドビ起動拡張のためにビューを構築してください), 我々は、より多くの情報をここで見つけました https://dev.to/alcazes/adobe-launch-build-a-view-for-your-extension-kd2

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

SpringmvcバインドSetのソリューション

再帰クエリユーザの発展軌跡