1. Integrating and Extending Oracle Content Management
  2. Enabling Oracle Content Management Integrations
  3. Integrate with Other Oracle Applications and Services
  4. Integrate with Oracle Visual Builder
  5. Build an Oracle Content Management VBCS Form and Data Report Components
  6. Build an Oracle Content Management VBCS Public Gated Form Component

Build an Oracle Content Management VBCS Public Gated Form Component

You can build a local Oracle Content Management component that uses REST APIs exposed by business objects in VBCS to deliver a simple, anonymous web form that captures visitor details to allow the visitor to download a document.

VBCS Configuration

  1. Allow Cross-Origin Resource Sharing (CORS):

    1. Choose Visual Builder , then Settings, and then Allowed Origins.

    2. Click New Origin and enter the URL of your Oracle Content Management server for Origin Address.

    3. Click the check mark to save.

  2. Create a new Application.

  3. Configure the app to allow anonymous access.

    1. Open Application Settings .

      .
      Description of vbcs_application_settings.png follows
      Description of the illustration vbcs_application_settings.png

    2. On the Settings page, choose User Roles.

    3. Select Allow anonymous access.

  4. Create a business object:

Build an Oracle Content Management Local Component

Assumptions:

  • The VBCS app name is "RequestForm".

  • The business object name is "registration" and it contains the custom fields.

    • firstName (required)

    • lastName (required)

    • email (required)

    • phone

    • company

    • jobTitle

Modify assets/render.js

  1. Define the component template as follows.

    <!-- 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 -->

  2. Create the observables for the fields in the Knockout 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);

  3. Handle required fields.

    Enable the Submit button only after all required fields have values.

  4. Obtain the VBCS connection.

    After you configure a VBCS connection, there are two ways to get the connection:

    • From siteinfo at site runtime

    • From Integrations 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;
};

  5. Submit the request.

    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');
        }
    });
};

  6. Create a trigger to download a document.

    {
	"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": []
	},
}

    Register the trigger in 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
};

    • Raise the trigger in render.js.

    \

Modify styles/design.css

Add the following css to 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;
}

Use the Form Component on Oracle Content Management

  1. Configure the VBCS connection:

    • Choose Administration, then Integrations, and then Applications.

    • Click the Visual Builder Cloud Service Integration check box.

    • Enter the URL, and click Save.

  2. Import the component:

  3. Add the component to a page:

    1. Edit a new or existing site.

    2. In Site Builder, choose Components and then Custom.


      Description of vbcs_components_custom.png follows
      Description of the illustration vbcs_components_custom.png

    3. Drag the component onto the page.


      Description of vbcs_public_form.png follows
      Description of the illustration vbcs_public_form.png

Note:

This VBCS public form component can be used on public or secure sites.