Skip to content
PDF

WebForms in Smart Pages

Overview

Smart Pages integrates seamlessly with Beautiful WebForms, allowing you to embed web forms directly into Smart View perspectives. This integration brings the full power of the Module Suite web forms technology into the Smart View domain.

WebForms in Smart Pages

Placeholder for Image

Add a screenshot showing a web form embedded in a Smart View perspective

Why Embed WebForms in Smart Pages?

The main purpose of embedding Beautiful WebForms views into Smart View's tiles is to leverage the BWF framework as a primary input mechanism for your EIM applications. Integrating BWF into Smart View enables you to:

  • Collect and validate user input within Smart View interfaces
  • Perform complex actions through form submissions
  • Surface relevant business information in highly interactive dashboards
  • Create seamless user experiences without leaving Smart View

Prerequisites

Before embedding WebForms in Smart Pages, ensure:

  • Module Suite is installed and activated
  • Beautiful WebForms extension is installed
  • Smart Pages extension is enabled
  • You have appropriate permissions to create Form Templates and Views

Creating an Embeddable WebForm

Creating an embeddable webform is not different from creating any other webform in the system. The steps are:

  1. Create a Form Template object
  2. Create a Beautiful WebForm View associated to the Form Template created in the previous step
  3. Using the Beautiful WebForms Form Builder, define your form (structure and layout)
  4. Create a standard Content Server Form object and associate it to the previously created Form Template and Beautiful WebForm View

Embedding WebForms in Smart Pages

Method 1: Using Content Script Result Tile

The recommended approach is to use the Include WebForms widget. This widget requires a piece of Content Script business logic to be injected into the Controller script. The injection happens automatically whenever you save the widget's configuration.

The following example shows the Content Script snippet that initializes and renders the form:

model.data["view_12345"] = {
    // Retrieve the form node by ID
    formNode = docman.getNodeFast(12345)

    // Get form information and view
    form = formNode.getFormInfo()
    view = formNode.view

    // Set flag indicating the form is embedded in another application (e.g., using the XECM business workspace widget in an XECM scenario)
    form.viewParams.am_in_page = model.data.serverOrigin != ''

    // Initialize field values
    form.aField.value = "Test Me"

    // Set view parameters that can be used by the form
    form.viewParams.aVariable = 1234
    form.viewParams.anOtherVariable = docman.getNodeByPath("My:Path").ID

    // Add resource dependencies (required if the form uses multiple views or subviews)
    forms.addResourceDependencies(form, true, true)

    // Return the form data structure with dependencies and rendered HTML
    return [
        id: formNode.ID,
        jsDeps: view.jsDeps + (form.viewParams.am_JsViewDependencies ?: []),
        cssDeps: view.cssDeps + (form.viewParams.am_CssViewDependencies ?: []),
        html: view.renderView(binding, form, true)
    ]
}

Next Steps