This sample shows how a Content Server WebForm could be created using the Bootstrap library. It also shows how Forms can be integrated into a Workflow.
|
|
|
Sample files for this example are located in the <Content_Server_Home>\module\webform_<16_x_x>\examples directory where <Content_Server_Home> is the Content Server installation directory, and <16_x_x> is the module number.
The sample folder contains the following files:
- ChangeRequestForm.html
-
The file ChangeRequestForm.html is the main WebForm HTML view for the sample. It is created using Bootstrap and jQuery. The styles are adopted to the SmartView styles at the time this sample Form was created. These styles could be different in the future, also the locations and names of the CSS files can be changed. This file is already installed with the Transport as the ChangeRequestWeb view of the ChangeRequestFormTemplate. It contains comments to explain technical details about the creation of the Form and its layout.
- ChangeRequestForm-Approver.html
-
The file ChangeRequestForm-Approver.html is the approver WebForm HTML view for the sample. This Form view is used in the Workflow in the Approver step. It contains some minor changes to the ChangeRequestForm.html Form. The main changes are the Approve and Reject buttons. These buttons use JavaScript to update a Boolean field and submit the Form. This file is already installed with the Transport as the Approver view of the ChangeRequestFormTemplate.
- ChangeRequestForm-Verify.html
-
The file ChangeRequestForm-Verify.html is the verify WebForm HTML view for the sample. This Form view is used in the Workflow in the Approved and Not Approved steps. The main change to the ChangeRequestForm.html Form is that all fields are set to read-only in the Form. This file is already installed with the Transport as the Verify view of the ChangeRequestFormTemplate.
- ChangeRequestTransport.zip
-
This is a Content Server Transport package. It contains all necessary components for the sample as seen below. This package must be deployed using Transport Warehouse. For more information on the Transport Warehouse, see
Working with Transport .- ChangeRequest
-
The folder which contains the other parts of the Transport. During deployment, all other parts are deployed in this folder. To change the deployment location, the default is the root of the Enterprise Workspace, you need to change the parent location of this folder only.
- ChangeRequestFormTemplate
-
The Form Template has three HTML views: ChangeRequest, Approver, and Verify. These are used in the ChangeRequestWorkflow. The fields of the Form Template are described in the ChangeRequestForm.html file.
- Submit Change Request
-
The Form, which is based on the ChangeRequestFormTemplate, initiates the ChangeRequestWorkflow when it is submitted. It uses the ChangeRequestWeb Form view from the Form Template.
- ChangeRequestWorkflow
-
The Workflow Map uses the ChangeRequestFormTemplate in the Form steps. It is a simple approval process with one Approval step, one Evaluation step and two verify steps: Approved and Not Approved. The Approval step and the Verify step are Forms steps. Each Form step has a Form view from the ChangeRequestFormTemplate assigned. The Workflow Map is configured so that it automatically initiates when the Workflow Map link is clicked in the UI. Only the standard initiation confirmation message shows and not the initiation step. The step names contain replacement tags to show Form values where these values are only replaced during Workflow initiation. All steps are assigned to the initiator to make it easier to work with this example.
The style sheet files screen.css and theme.css are referenced in the sample Forms. Both are defining basic styles for the Content Server layout. The screen.css file defines basic styles for the Content Server Classic View. The theme.css file is an adopted boostrap.css file. It contains the styles for the SmartView layout.
The sample Forms are built based on the Bootstrap classes and layout principals for HTML pages and Forms.
The HTML Form element is defined as a horizontal Form so that all controls and labels are arranged in a horizontal order. Each field of the Form is grouped into a div element with the styles form-group and row. This combines the label and input control for the layout. The field itself has the form-control class to set the standard Boostrap behavior for the field.
An icon is added to the front of the input control for the Requested by, Date submitted and Approved by fields. These icons are loaded with the standard glyphicon classes and marked with the input-group-addon style.
The size of the controls are based on Bootstraps 12 column layout. The field sizes are dependent on the screen size. Special settings are done for large (col-lg- ) and small (col-sm- ) screens. For more details about the Bootstrap styles and layout, see http://getbootstrap.com/css/.
For the Date Submitted field, the bootstrap-datepicker control is added as an example. It is initialized in the JQuery ready callback, $('#_1_1_3_1').datepicker({autoclose: true, todayBtn: true});. It is only an example to show how a different datepicker could be integrated into a WebForm.
For additional information about the structure and databinding, see the ChangeRequestForm.html file. This file contains comments with detailed information.