Akumina Flow FAQ

• bind the dynamic task HTML input elements to the associated task properties
• bind the the dynamic task HTML buttons to the associated workflow actions
• control internal widget processing and presentation (e.g., switching modes)

Question:

I’m implementing a page survey poll where I’m asking the user to rate the page.  I want to display stars for the rating choice.  How do I change the generated HTML to do that?

Answer:

Here’s an example of what the generated HTML may look like:

<label>
  <input name="actions.propRATING" type="radio" value="ONE_STAR" 
      data-bind="checked:actions.propRATING" /> One Star
</label>
...
<label>
  <input name="actions.propRATING" type="radio" value="FOUR_STAR" 
      data-bind="checked:actions.propRATING" /> Four Stars
</label>

You can edit the generated HTML however you need to — just keep the knockout.js bindings (data-bind=””). So for example, you could change the HTML to the following:

<label class="xyz-star-rating"
>
  <input name="actions.propRATING" type="radio" value="ONE_STAR" 
      data-bind="checked:actions.propRATING" /> 
  <i class="far fa-star fa-fw" aria-hidden="true"></i>
  <span class="sr-only">One Star</span>
</label>
...
<label class="xyz-star-rating">
  <input name="actions.propRATING" type="radio" value="FOUR_STAR" 
      data-bind="checked:actions.propRATING" /> 
  <i class="far fa-star fa-fw" aria-hidden="true"></i>
  <span class="sr-only">Four Stars</span>
</label>

Define a css class (e.g. xyz-star-rating; change xyz to your customer’s prefix) that will display the stars as desired. For example, remove the radio button circle and display it in-line so all 4 stars appear on the same line.

Question:

I’m implementing a page survey poll where I’m asking the user to rate the page.  I want to display stars for the rating choice and highlight the stars when the user hovers over a star. How would I approach that?

Answer:

There are 2 basic approaches to add your own custom event handler:

• Dynamically add your event handler once the page has loaded
• Use knockout.js and define your event handler in the HTML

The easiest approach is to use knockout.js. So first you would create the javascript functions and make sure they are available in the DOM and then you can just reference the functions using knockout as shown below.

<label class="xyz-star-rating"
    data-bind="event:{mouseover: XYZ.showRatingHover, mouseout: XYZ.hideRatingHover}">
  <input name="actions.propRATING" type="radio" value="ONE_STAR" 
      data-bind="checked:actions.propRATING" /> 
  <i class="far fa-star fa-fw" aria-hidden="true"></i>
  <span class="sr-only">One Star</span>
</label>
...
<label class="xyz-star-rating"
    data-bind="event:{mouseover: XYZ.showRatingHover, mouseout: XYZ.hideRatingHover}">
  <input name="actions.propRATING" type="radio" value="FOUR_STAR" 
      data-bind="checked:actions.propRATING" /> 
  <i class="far fa-star fa-fw" aria-hidden="true"></i>
  <span class="sr-only">Four Stars</span>
</label>

Your XYZ.showRatingHover function would accept 2 parameters (data, event).
The data parameter is the bound model object (in this case the actions.propRATING property).
The event parameter will be the mouseover event
Knockout allows you to pass more/less parameters – so you could pass the current star value, etc
See this page for details
You also may want to submit the rating as soon as they click on a star and not display a Submit button. You would also do that with knockout event binding. Here’s an example:

<input name="actions.propRATING" type="radio" value="ONE_STAR" 
    data-bind="checked:actions.propRATING, click:completeTask" />

The “completeTask” javascript function is implemented by the Akumina Flow widgets and will submit the current task.

   let $root: JQuery = $(`#${props.id}`);
   let rootElement: any = $root[0];
   // ko is the knockout javascript object for accessing knockout features
   let viewModel:any = ko.contextFor(rootElement).$root;

1.b Add a custom observable to the model

   var customKo = ko.observable("some initial value");
   viewModel["customKo"] = customKo;
   // now need to rebind the model to the ui
   ko.cleanNode(rootElement);
   ko.applyBindings(viewModel, rootElement);

2. Store the property value that you want to base your conditional messages on
2.1 Provide a dataCallback method for the “WillCompleteTask” action. This example uses the “RATING” task property value

    this.customKo( data.CustomProperties.find(prop => {return prop.Name == "RATING"}).Value );

3. Write your completed Message HTML (in Akumina Flow Designer) to use the “customKo” knockout observable

<div>Thanks for your feedback</div>
<div data-bind="visible: customKo() == "OneStar">We are working on improving this page</div>

• Akumina Flow User Widget
• Akumina Flow Team Widget

2.2 Fully Custom Approach
Create your own widget and interface with Akumina Flow using the provided REST API. This is what Akumina does for the Broadcast Center and Content Approval workflows.

2.3 Hybrid Approach
Use one of the provided Akumina Flow widgets and provide a:

• UI callback to provide or change the widget HTML
• data callback to change the widget data and/or behavior