🥳 Alpha Platform Release - October End 2024

Neutrinos Platform Product Release Notes
,
1

Pathches After the Release

  • Task distribution config is not getting saved when 2 tasks have the same taskDefinitionId

:sparkles: Highlights

Lifecycle hooks config for all kinds of inbox

  1. On Init:
  • Triggered when the inbox items (case and task instances) are fetched from the backend. Use this to modify the inbox data before rendering.
  • Parameters passed to the custom code:
    • data: The inbox data fetched from the backend.
  1. After View Init:
  • Triggered after the inbox items are rendered on the UI. Use this to perform any post-rendering operations.
  • Parameters passed to the custom code:
    • data: The inbox data fetched from the backend.
    • element: Reference to the DOM instance of the inbox table.

Note: All the parameters passed to the custom code can be seen by logging the params object in the console like this:

console.log(params);

Style Inbox Table Cells Based On the value

  • Every cell in the inbox table can be styled based on the value of the cell using the css editor using the data- prefix
  • The format for selecting a cell is => [data-column-name="column name"][data-value="column value"]
  • To select one of the default inboxes use => .inbox-myTasks, .inbox-groupTasks, .inbox-teamTasks
  • To select a custom filter use => .inbox-{inbox name or custom filter name (spaces replaced with '-'s}
  • The format for selecting inbox is => .inbox-{inbox name or custom filter name (spaces replaced with -s}
  • To select a column header use => .{inbox-selector} th[data-column-name="column name"]
/* .inbox-{inbox name or custom filter name (spaces replaced with `-`s} */
.inbox-myTasks [data-column-name="Age"][data-value="2d"] {
  background-color: red;
}

/* For enquiry inbox  */
.enquiry-inbox-Default
  [data-column-name="Status"][data-value="Pending"] {
  background-color: red;
}

/* For admin inbox  */
.admin-inbox-Default [data-column-name="Status"][data-value="Pending"] {
  background-color: red;
}

NOTE: You might have to use !important to override the default styles.

New Triggers For Page

  1. Before Init
  • Triggered before the page design json is parsed to create the page UI.
  • Use this to modify the page design json before rendering.
  • Parameters passed to the custom code:
    • rendererJSON: The page design json.
  1. On Change
  • Triggered when the value of a form field changes, after the bound variables (co, local etc) are updated and the page is validated
  • Use this to perform any operations when the value of a form field changes.
  • Parameters passed to the custom code:
    • leafInstance: The leaf instance of the form field whose value changed.
    • rendererInstance: The renderer instance on the page:
    const { leafInstance, rendererInstance } = params;
const value = leafInstance.value;
const rendererForm = rendererInstance.get();
rendererForm.value; // The value of the form fields on the page
rendererForm.valid; // The validity of the page/renderer
rendererForm.errors; // The errors on the page/renderer

Ability to Add Custom Validation For A Form Field (SDK)

ap.renderer.validations.add(leafId, keyName, functionRef, validateOnAdd);
/**
 * @param {string} leafId - The leaf id of the form field (can be copied from the attribute window header in workflow studio).
 * @param {string} keyName - The unique name for the validation function. ex. 'validateAge', 'validateCompanyMailId' etc
 * @param {function} functionRef - The callback function to be executed for validation. It will be called with the value of the form field as the first argument.
 * The function should return an object with the following structure:
 * {
 * valid: true/false, // true if the validation passes, false otherwise
 * error: 'Error message to be shown if the validation fails' // The error message to be shown if the validation fails
 * }
 * @param {boolean} validateOnAdd - If true, the validation function will be executed when the form field is added to the form and error will be shown if the validation fails.
 */

// Example:
ap.renderer.validations.add(
  "leafId",
  "validateIfAdult",
  (leafInstance) => {
    if (leafInstance.value < 18) {
      return {
        valid: false,
        error: {
          message: "Age should be greater than 18",
        },
      };
    }
    return {
      valid: true,
    };
  },
  true,
);

Ability to Configure Typing in the input of the Datepicker component

  • New attribute Allow Input added to the Datepicker component to allow typing in the input field.
  • If Allow Input is set to true, the user can type in the input field to select the date.

Ability to configure separator for the Datepicker component

  • New attribute Separator added to the Datepicker component to configure the separator for the date.
  • The default separator is /, and you can change it to any other separator like - and .

:floppy_disk: Database Migration (Before Upgrading)

To apply the database migration, run the following script:

Config Service

Env Variable Changes

alpha-admin-service

Key Description Mandatory
BPM_SERVER_BASE_URL Base URL of the alpha-bpm-service. Required for getting the error flow process variables in the Admin “Re-Attempt” inbox Yes
ALPHA_BPM_CLIENT_ID client id configured in the alpha-bpm-service. Usually, it is the common client id for all the services Yes
ALPHA_BPM_CLIENT_SECRET client secret configured in the alpha-bpm-service. Usually, it is the common client secret for all the services Yes
ALPHA_DASHBOARD_URL URL of the dashboard service. Added in this release No
5 Likes
2

Is this extensible to a use case for example, where specific CSS like color: red is to be applied if age is greater than 2 days?

1 Like
3

Really appreciate the introduction of custom validation for form fields. :fire:
Does this also allow for reuse of validation functions across different form fields and/or different pages?

1 Like
4

The css does not support comparison operation as selector. But you can achieve it using the After View Init.

  1. Either directly assign a style property for the DOM ref passed (using params.element)
  2. Or, add a class on the desired DOM inside the params.element and define that class in the Styles editor
2 Likes
5

As of now, it does not.
But we are thinking of solving the reusability problem across the workflow studio editors.
Stay tuned

3 Likes