How To: Building Forms for Mobile

The following topic discusses how to create a form that is configured to be used in the K2 Workspace app. The form configuration contains various mobile options such as the use of the barcode scanner control, responsive themes, application forms, and offline availability.

Runtime Example

Scenario

The following scenario includes the creation of a Returns form that allows customers who have purchased a product and wish to return it. The return is done using a form that is available in the K2 Workspace app.

Steps

  1. Open K2 Designer and create a SmartObject called Returns with the following properties.

    Returns SMO PropertiesTypeKeyRequiredUnique
    IDAutonumberYesNoYes
    NameTextNoNoNo
    SurnameTextNoNoNo
    Contact NumberNumberNoNoNo
    Contact EmailTextNoNoNo
    Product NameTextNoNoNo
    Product BarcodeNumberNoNoNo
    Purchase DateDateNoNoNo
    Return OptionMultivalueNoNoNo
  2. Generate an Item View for the Returns SmartObject.
  1. Open the Returns item view, and disable the Visible option for the ID label and text box controls.

  2. Remove the Create, Delete, and Load buttons. Select Remove all dependencies when deleting the buttons.

  3. Move the Save button under the Return Option.
  4. Rename the Save button to Submit.
  5. Reorganize the view as shown here:
  6. Select the Contact Number text box control and click the Styles ellipse ... button.
  7. Select Special from the Format tab then select Phone Number. Click OK.
  8. Select the Return Option Check Box List control and click the Change Control option.
  9. On the Change Control: Return Option Check Box List page, select Choice and click OK.
  10. Click the Typeellipse ... in the Data Source section of the Return Option Choice control.
  11. On the Configure Data Source page, select the Use a static list of values in the control option, and click the ellipse ... button.
  12. On the Fixed List Configuration page, click Add.
  13. Add the Refund, Exchange, and Store Credit on the Fixed List Configuration page. Click OK and OK again.
  14. Click Finish and Check In the Returns Item View.
  1. Drag the Barcode control from the Input section in the Toolbox tab on to the view.
  2. Drag a Button control from the Action section in the Toolbox tab under Product Barcode text box control and rename the button to Scan.
  3. Go to the Rules tab and click Add Rule.
  4. Add a When a control on the View raises and event event. Select Barcode on the select control option and Initialized on the select event option.
  5. Next, click the Conditions tab and add the an advanced condition is true condition. Click an advanced condition option.
  6. On the Rule Designer page, click Add. Drag the Is Supported option from the Controls > Barcode > Detail section from the Context Browser to the Left option.
  7. Configure the Operator option to Equals and the Right option enter false. Click OK.
  8. Click on the Actions tab and add the Show a message action. Click configure.
  9. On the Show a Message to the User page, configure the Title, Heading and Body fields as shown below. Click OK and OK again.
  10. Click Add Rule.
  11. Add a When a control on the View raises an event event. Click the select control option and select the Scan Button.
  12. Click on the Conditions tab and add the an advanced condition is true condition. Click an advanced condition option.
  13. On the Rule Designer page click Add. Drag the Is Supported option from the Controls > Barcode > Detail section from the Context Browser to the Left option.
  14. Configure the Operator option to Equals and the Right option enter true. Click OK.
  15. Click on the Actions tab and add a Execute a control's method action.
  16. Click on the select control option and select Barcode. No configuration is required for the method. Click OK.
  17. Click Add Rule.
  18. Add a When a control on the View raises an event event, select Barcode on the select control option and Changed on the select event option.
  19. Click the Actions tab and add the Transfer data action. Click configure.
  20. Drag the Value option from the context browser (Returns > Controls > Barcode > BarCode) to the Product Barcode Text Box field. Click OK and OK again.
  21. The Barcode control is now configured to capture the item's barcode on the Returns view.
  1. Generate a form based on the Returns Item View.
  2. Rename the form to Returns, select Save and edit the Form, and click OK.
  3. Next, select a responsive theme from the Theme option in the Appearance section. The available responsive themes are Blue Void, Grey Void and Lithium. The Lithium theme is selected.
  4. Add a title to the form called Returns Form.
  1. Expand the Advanced option on the Properties tab and select the Applications Form check box. This enables the Returns form to be accessible in the Forms section of the K2 Workspace app. For more information see Application Forms.
  2. Expand the Advanced option on the Properties tab and select the Offline Availability check box. This enables the Returns form to be opened and actioned in the K2 Workspace app when the app is offline. For more information see Offline Availability.
  3. Click Finish and check in the Returns form.

  4. The Returns form is available in the K2 Workspace app and can used to capture data of the customer’s return. Note that the form up to this point only stores the captured data via the Returns SmartObject. You can extend this form to include an approval step within a workflow, but that is beyond the scope of this article. To learn how to associate a form with a workflow see the Start a Workflow with a Form topic for more information.