Overview

Skill Level: Intermediate

Scenario: BAW Application wanting a pop-up comment section in the UI for users to add comments into a process flow on a human service. Useful for demos/POCs. Easy way to show how to implement this often-requested functionality for clients.

Ingredients

Basic knowledge of Business Automation Workflow (Coaches, Data, Business Objects, Service Call etc)

Step-by-step

  1. Create a blank coach view. For this example, it will be called DevWorks Comments.

    Picture1-3

  2. Add a Collapsible Panel control, and add a Table control into the Collapsible Panel.

    Below the table, add a Horizontal Layout control as well. The Coach View should look like the following at this point:

    Picture2-1

  3. Add controls to the Table and the Horizontal Layout controls.

    1)    Add three Output Text controls and one Date Time Picker control to the Table control within the Collapsible Panel control. For the sake of this walkthrough, the output controls will be named the following:

    • Comment
    • User
    • Topic
    • Timestamp

     

    Below the Table control, in the Horizontal Section, add a Spacer control and a Button control. Under the positioning tab for the Spacer control, set the width to 75% and change the button label to be ‘Add Comment’. Change the Collapsible Panel label to read ‘Comments’. At this point, the coach view should now look like this:

    Picture3-1

  4. Create a business object to bind to the controls stored in the table.

    Under the Data tab, create a new business object called  ‘DevWorksComments’.

     

    Picture4-1

     

    Within this business object, add the four following parameters:

    • commentText (String)
    • timestamp (Date)
    • user (String)
    • topic (String)

     

    Picture5-1

  5. Bind the controls and the coach view to the newly created DevWorksComments business object.

    First, add a configuration option to the DevWorks Comments coach view. Set the configuration option variable type to match the DevWorksComments business object, and check the ‘Is List’ checkbox as well.

     

    Picture6-1

  6. Bind the correlating fields on the coach view to the correct values from the business object.

    The coach view should now look like this:

     

    Picture7-1

     

    Be sure the table is bound to the comments[] variable as shown above.

  7. Add the modal popup that will display when the user clicks the ‘Add Comment’ button.

    Below the Horizontal Section control housing the ‘Add Comment’ button and the Spacer control, add a Modal Section control.

     

    Picture8-1

     

    Change the Control ID for the Modal Section control to ‘CommentPopup’ as shown above, in order to invoke this Control ID on the events tab of the Add Comment button. From here, click on the Modal Section control to expand it. Add another Collapsible Panel with fields for users to enter comments as well as invoke a service call. Within the Modal Section, add a Collapsible Panel control labeled ‘New Comment’. Inside the panel, add a Text control labeled ‘Topic’ followed by a Text Area control labeled ‘Comment’ and a Horizontal Section below. Within the Horizontal Section, add two buttons labeled ‘Cancel’ and ‘Submit’. Finally, below the Horizontal Section, add a Service Call control. The Modal Section control should look like this:

     

    Picture9-1

     

    Now logic needs to be added to the events section of the Cancel and Submit buttons. On the Cancel button, add the following in the ‘On Click’ section:

     

    view.ui.get(“CommentPopup”).context.options._metadata.visibility.set(“value”, “NONE”);

    if(view.ui.get(“Text_Area1”).getData() != undefined){

          view.ui.get(“Text_Area1”).setData(“”);         

    }

     

    if(view.ui.get(“Text4”).getData() != undefined){

          view.ui.get(“Text4”).setData(“”);      

    }

     

    **Note that Text_Area1 is the Control ID for the Comment control section and Text4 is the Topic Control ID. Your values may be different depending on the order you add them to the coach palate. You can change them to custom values if you like.**

     

    Picture10-1

     

    For the Submit button, add the following code to the ‘On Click’ section:

     

    view.ui.get(“CommentPopup”).context.options._metadata.visibility.set(“value”, “NONE”);

    var item = {};

    item.commentText = view.ui.get(“Text_Area1”).getData();

    item.timestamp = new Date();

    item.user = view.ui.get(“Service_Call1”).context.element.getAttribute(“userName”);

    debugger;

    item.topic = view.ui.get(“Text4”).getData();

     

    view.context.options.comments.get(“value”).add(item);

     

     

    if(view.ui.get(“Text_Area1”).getData() != undefined){

          view.ui.get(“Text_Area1”).setData(“”);         

    }

     

    if(view.ui.get(“Text4”).getData() != undefined){

          view.ui.get(“Text4”).setData(“”);      

    }

     

     

    **Note that Text_Area1 is the Control ID for the Comment control section and Text4 is the Topic Control ID. Your values may be different depending on the order you add them to the coach palate. You can change them to custom values if you like.**

     

    Picture11-1

     

    Next, add the following line of code to the Service Call control in the ‘On Result’ section:

     

    me.context.element.setAttribute(“userName”, me.getResult());

     

    Picture12-1

     

     

  8. Create a Service Flow for the Service Call control to invoke, to get the user name of the user adding the comment.

    Create a service called ‘DevWorks Get User’. Under the variables tab, create the following Input/Output variables:

     

    Picture13-1

     

    Next, add a script to the template with the following line of code:

     

    tw.local.results = tw.system.user_fullName;

     

    Picture14-1

     

    After hooking up the script, go to the Overview tab and select the option to ‘Allow Calls from All Users’ option shown here:

     

    Picture15-1

     

    Finally, hook up the newly created service under the configuration option for the Service Call below and check the Auto Run Box so that the service call runs automatically:

     

    Picture16-1

     

    The final step on the Coach View is to set the Modal visibility value to ‘None’, so that it does not show up on the page until the Add Comment button is clicked.

     

    Picture17-2

     

     

  9. Assemble the coach, and test the coach view.

    Create a client side human service.

     

    Picture19-1

     

    Add the business object as a private variable since this is just being tested locally within this service.

     

    Picture20-1

     

    Now drag the DevWorks Comments coach view onto the coach and under the configuration options bind the view to the business object.

     

    Picture21-1

     

     

  10. Run the human service.

    You should see the following when you run the service:

     

    Picture22-1

     

    Click ‘Add Comment’. The modal should now pop up on screen.

     

    Picture23-1

     

    Fill out the fields for a test comment.

     

    Picture24-1

     

    You should see the following when you click ‘Submit’:

     

    Picture25-1

     

    As this is being done in a VM environment, the user name is populating as dadmin, the default user account for VMs. In your environment, it should populate with the user name you are logged in as.

     

    This coach view can be added to other services and bound to the ‘comments’ variable that will allow other services to display comments that have been added from previous coaches. This is an easy way to show this functionality to clients as it is a highly requested functionality.

Join The Discussion