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. 設定ページで、「ユーザー・ロール」を選択します。
  
  「図vbcs_settings_page.pngの説明」
3. 「匿名アクセスの許可」を選択します。
ビジネス・オブジェクトの作成:
- フィールドを追加します。
  
  「図vbcs_add_fields.pngの説明」
- ロールベースのセキュリティの有効化
- 匿名ユーザーに作成権限を付与します。
  
  「図vbcs_anonymous_user.pngの説明」

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

前提:

VBCSアプリケーション名はRequestFormです。
ビジネス・オブジェクト名はrequestformで、次のカスタム・フィールドが含まれています:
- name (必須)
- email (必須)
- phone
- subject
- message

変更assets/render.js

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

<!-- ko if: initialized -->
<div class="form">

       <!-- 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="name">Name</label>
       <input type="text" id="name" name="name" required placeholder="Your name. . ." data-bind="value: name"/>      

       <label class="required-field" for="email">Email</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="subject">Subject</label>
       <input type="text" id="subject" name="subject" data-bind="value: subject"/>

       <label for="message"></label>Message</label>
       <textarea id="message" name="message" rows="6" data-bind="value: message"/>

       <button data-bind="click: sendRequest, , enable: canSubmit">Send Request</button></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.name = ko.observable();
self.email = ko.observable();
self.phone = ko.observable();
self.subject = ko.observable();
self.message = ko.observable();

// Get VBCS server
var serverPromise = getVBCSServerURL();
    serverPromise.then(function (result) {
    self.VBCSServerUrl(result.url);
    self.initialized(true);
});

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

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

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

VBCS接続を取得します。

VBCS接続を構成した後に接続を取得する方法は2つあります:

サイト・ランタイムのサイト情報から
サイト・ビルダーの統合から

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 = ‘Requestform'
    var url = vbcsServer + '/rt/' + appName + '/' + appVersion + '/resources/data/' + businessObject;
    var payload = {
        "name": self.name(),
        "email": self.email(),
        "phone": self.phone(),
        "subject": self.subject(),
        "message": self.message()
    };
    $.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.name('');
            self.email('');
            self.phone('');
            self.subject('');
            self.message('');
        },
        error: function(jqXhr, textStatus, errorThrown) {
            console.log('Error:');
            console.log(jqXhr);
            self.requestSuccessMsg('');
            self.requestFailMsg('Failed to submit the request');
        }
    });
};

変更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. ページにコンポーネントをドラッグします。