Oracle Content Management VBCSパブリック・ゲート・フォーム・コンポーネントの構築

VBCS構成

Allow Cross-Origin Resource Sharing (CORS):
1. Visual Builder、「設定」、「許可される原点」の順に選択します。
2. 「新しい原点」をクリックし、オリジン・アドレスのOracle Content ManagementサーバーのURLを入力します。
3. チェック・マークをクリックして保存します。
新規アプリケーションを作成します。
匿名アクセスを許可するようにアプリケーションを構成します。
1. アプリケーション設定を開きます。
  。
  
  「図vbcs_application_settings.pngの説明」
2. 設定ページで、「ユーザー・ロール」を選択します。
3. 「匿名アクセスの許可」を選択します。
ビジネス・オブジェクトの作成:
- フィールドを追加します。
  
  「図vbcs_add_fields.pngの説明」
- ロールベースのセキュリティの有効化
- 匿名ユーザーに作成権限を付与します。
  
  「図vbcs_anonymous_user.pngの説明」

Oracle Content Managementローカル・コンポーネントの構築

前提:

VBCSアプリケーション名はRequestFormです。
ビジネス・オブジェクト名はregistrationで、カスタム・フィールドが含まれています。
- firstName (必須)
- lastName (必須)
- email (必須)
- phone
- company
- jobTitle

変更assets/render.js

コンポーネント・テンプレートを次のように定義します。

<!-- ko if: initialized -->

div class="form">
      <!-- ko if: !showDownload() -->
      <h1 style="text-align: center;">Fill out the form to access the document</h1>

      <!-- ko if:  requestSuccessMsg -->
      <div class="request-msg green" data-bind="text: requestSuccessMsg"></div>
      <!-- /ko -->
      <!-- ko if:  requestFailMsg -->
<div class="request-msg red" data-bind="text: requestFailMsg"></div>
<!-- /ko -->

      <label class="required-field" for="firstname">First Name</label>
      <input type="text" id="firstname" name="firstname" required placeholder="Your first name. . ." data-bind="value: firstName"/>
      <label class="required-field" for="lastname">Last Name</label>
      <input type="text" id="lastname" name="lastname" required placeholder="Your last name. . ." data-bind="value: lastName"/>
      <label class="required-field" for="email">Business E-mail</label>
      <input type="text" id="email" name="email" required placeholder="Your email. . ." data-bind="value: email"/>
      <label for="phone"></label>Phone</label>
      <input type="text" id="phone" name="phone" data-bind="value: phone"/>
      <label for="company">Company</label> 
      <input type="text" id="company" name="company" data-bind="value: company"/>
      <label for="jobtitle"></label>Job Title</label>
      <input type="text" id="jobtitle" name="jobtitle" data-bind="value: jobTitle"/>

      <button data-bind="click: sendRequest, enable: canSubmit">Accept the document</button>
      <!-- /ko -->

      <!-- ko if: showDownload() -->
      <div class="download">
              <h2>Thanks for your registration. Please click the button to download. </h2>
              <button data-bind="click: startDownload">Download</button>
              <button data-bind="click: closeDownload">Close</button>
      </div>
      <!-- /ko -->
</div>

<!-- note that the component has completed rendering into the page -->
<div class="scs-hidden" data-bind="scsRenderStatus: {'id': id, 'status': 'complete'}"></div>
<!-- /ko -->

ノック・アウトViewModelのフィールドの監視可能ファイルを作成します。

self.initialized = ko.observable(false);
self.requestSuccessMsg = ko.observable();
self.requestFailMsg = ko.observable();
self.VBCSServerUrl = ko.observable();
self.showDownload = ko.observable(false);

self.firstName = ko.observable();
self.lastName = ko.observable();
self.email = ko.observable();
self.phone = ko.observable();
self.company = ko.observable();
self.jobTitle = ko.observable();

self.canSubmit = ko.computed(function () {
    return self.firstName() && self.lastName() && self.email();
}, self);

必須フィールドを処理します。

すべての必須フィールドに値が指定されている場合のみ、「送信」ボタンを有効にします。

VBCS接続を取得します。

VBCS接続を構成した後は、次の2つの方法で接続を取得できます:

From siteinfo at site runtime
「統合」 in Site Builderから

var getVBCSServerURL = function () {
    var serverPromise = new Promise(function (resolve, reject) {
    // First try to get from siteinfo
    var siteConnections = SCSRenderAPI.getSiteProperty('siteConnections');    
    var serverUrl = siteConnections && siteConnections.VBCSConnection;
    if (serverUrl) {
        console.log('Get VBCS server from siteinfo: ' + serverUrl);
        resolve({'url': serverUrl});
    } else {
        // Get from integrations
        var configUrl = '/documents/web?IdcService=AF_GET_APP_INFO_SIMPLE&dAppName=VBCS';
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: configUrl,
                success: function (data) {
                    var appInfo = data.ResultSets.AFApplicationInfo;
                    var enabled;
                    if (appInfo) {
                        for (var i = 0; i < appInfo.fields.length; i += 1) {
                            if (appInfo.fields[i].name === 'dAppEndPoint') {
                                serverUrl = appInfo.rows[appInfo.currentRow][i];
                            } else if (appInfo.fields[i].name === 'dIsAppEnabled') {
                                enabled = appInfo.rows[appInfo.currentRow][i];
                            }
                            if (serverUrl && enabled) {
                                break;
                            }
                        }
                        if (enabled !== '1') {
                            serverUrl = '';
                        }
                    }
                    console.log('Get VBCS server from Idc Service: ' + serverUrl);
                    resolve({'url': serverUrl});
                },
                error: function (xhr, status, err) {
                    console.log('Request failed: url:' + configUrl + ' status: ' + status + ' error: ' + err);
                    resolve({'url': serverUrl});
                }
            });
        }
    });
    return serverPromise;
};

リクエストを送信します。

self.sendRequest = function (data, event) {
    var vbcsServer = self.VBCSServerUrl();
    var appName = 'requestform',
        appVersion = 'live',
        businessObject = 'Registration';
    var url = vbcsServer + '/rt/' + appName + '/' + appVersion + '/resources/data/' + businessObject;
    var payload = {
        'firstName': self.firstName(),
        'lastName': self.lastName(),
        'email': self.email(),
        'phone': self.phone(),
        'company': self.company(),
        'jobTitle': self.jobTitle()
    };

    $.ajax({
        type: 'POST',
        url: url,
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Content-type', 'application/vnd.oracle.adf.resourceitem+json');
				},
        data: JSON.stringify(payload),
        dataType: 'json',
        success: function (data) {
            self.requestFailMsg('');
            self.requestSuccessMsg('Request has been submitted successfully');
            self.firstName('');
            self.lastName('');
            self.email('');
            self.phone('');
            self.company('');
            self.jobTitle('');
            self.showDownload(true);
        },
        error: function (jqXhr, textStatus, errorThrown) {
            console.log('Error:');
            console.log(jqXhr);
            self.requestSuccessMsg('');
            self.requestFailMsg('Failed to submit the request');
        }
    });
};

ドキュメントをダウンロードするトリガーを作成します。

{
	"id": "ECVBCS-Gated-Form",
	"settingsData": {
		"settingsHeight": 90,
		"settingsWidth": 300,
		"settingsRenderOption": "dialog",
		"componentLayouts": [],
		"triggers": [{
			"triggerName": "VBCSGatedFormSubmitted",
			"triggerDescription": "VBCS gated form submitted",
			"triggerPayload": [{
				"name": "payloadData",
				"displayName": "Document URL"
            		}]
        	}],
		"actions": []
	},
}

appinfo.jsonにトリガーを登録します。

self.raiseTrigger = function (triggerName) {
    SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
        'triggerName': triggerName,
        'triggerPayload': {
            'payloadData': 'https://docs.oracle.com/en/cloud/paas/content-cloud/developer/developing-oracle-content-management-cloud.pdf'
        }
    });
};

self.startDownload = function (data, event) {
    console.log('Raise trigger: VBCSGatedFormSubmitted');
    self.raiseTrigger("VBCSGatedFormSubmitted"); // matches appinfo.json
};

render.jsでトリガーを実施します。

\

変更styles/design.css

次のcssをdesign.cssに追加します。

.form {
    font-family: "Helvetica Neue", "Segoe UI", sans-serif-regular, Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.form input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.form textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.form button  {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.form button:hover {
    background-color: #45a049;
}
.form button:disabled {
    background-color: #dddddd;
}
.required-field::after {
  content: "*";
  color: red;
  margin-left:2px
}
.request-msg {
	padding: 5px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}
.green {
	background-color: #81BA5E;
}
.red {
	background-color: red;
}

Oracle Content Managementでのフォーム・コンポーネントの使用

VBCS接続を構成します:
- 「管理」、「統合」、「アプリケーション」の順に選択します。
- 「Visual Builder Cloud Service統合」チェック・ボックスをクリックします。
- URLを入力して、「保存」をクリックします。
コンポーネントをインポートします:
- 「開発者」、「コンポーネント」の順に選択します。
- 「作成」を選択し、次に「コンポーネントのインポート」を選択します。
  
  「図vbcs_import_component.pngの説明」
ページにコンポーネントを追加します:
1. 新規または既存のサイトを編集します。
2. サイト・ビルダーで、「コンポーネント」、「カスタム」の順に選択します。
  
  「図vbcs_components_custom.pngの説明」
3. ページにコンポーネントをドラッグします。
  
  「図vbcs_public_form.pngの説明」

ノート:

このVBCSパブリック・フォーム・コンポーネントは、パブリック・サイトまたはセキュアなサイトで使用できます。