Build an Oracle Content Management VBCS Multipage Form As a Web App Component

You can build a complex, multipage form for Oracle Content Management as a component of a VBCS web application.

To build a VBCS multipage form as a web application component for Oracle Content Management, you can remove the header and footer, set the IFrame height, add validation for required form fields, .Call a REST endpoint to save form data, and, for a public web application, set security to allow anonymous access.

Remove the VBCS Web Application Header and Footer

If you don’t want the default VBCS web application’s header and footer, you can remove them from the page.


Description of vbcs_header_footer.png follows
Description of the illustration vbcs_header_footer.png

Set the VBCS Component Iframe Height

You need to set the VBCS component iframe height for each page in the flow of the web app. Include a validation group in the page model,


Description of vbcs_iframe_height.png follows
Description of the illustration vbcs_iframe_height.png

Required Form Fields Validation

When you try to navigate to another page, some of form fields on the current page are marked as "required" and don’t have values yet. By default, there is no validation. You can use oj-validation-group to add the validation:

  1. Wrap all your form fields inside the component <oj-validation-group>.


    Description of vbcs_form_fields_validation.png follows
    Description of the illustration vbcs_form_fields_validation.png
  2. Include oj-validation-group in the page model.


    Description of vbcs_validation_group.png follows
    Description of the illustration vbcs_validation_group.png
  3. Create a Flow module function .


    Description of vbcs_flow_module.png follows
    Description of the illustration vbcs_flow_module.png
  4. Create an action chain for the "Go to the Next Step" button.


    Description of vbcs_button_click_action.png follows
    Description of the illustration vbcs_button_click_action.png

    The "If" condition checks the values for the required fields; for example:

    {{ $flow.variables.enroll_values.field  &&  $flow.variables.enroll_values.zip }}

    If the condition evaluates to true, navigation goes to the second step. Otherwise, it stays on the current page, and the error message is shown.

Call REST Endpoint to Save Form Data

At the last step, after the form fields validation, you can use the "Call REST Endpoint" action to persist form data in the business object.


Description of vbcs_call_rest_endpoint.png follows
Description of the illustration vbcs_call_rest_endpoint.png

Public Web Application

If the web application is intended for public, you can set security to allow anonymous access.


Description of vbcs_public_web_app.png follows
Description of the illustration vbcs_public_web_app.png

Also allow anonymous access for the business object.


Description of vbcs_settings_user_roles.png follows
Description of the illustration vbcs_settings_user_roles.png