# 🥳 Alpha Platform Release - October End 2024
**URL:** https://community.neutrinos.com/t/alpha-platform-release-october-end-2024/102
**Category:** Product Release Notes
**Tags:** neutrinos-alpha, alpha-release-notes
**Created:** [November 18, 2024, 12:13pm UTC](https://community.neutrinos.com/t/alpha-platform-release-october-end-2024/102 "2024-11-18T12:13:56Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@doomedCode](https://community.neutrinos.com/u/doomedCode)
#### Post date: [November 18, 2024, 12:13pm UTC](https://community.neutrinos.com/t/alpha-platform-release-october-end-2024/102/1 "2024-11-18T12:13:57Z")
> #### **Pathches After the Release**
>
> - Task distribution config is not getting saved when 2 tasks have the same `taskDefinitionId`
## ✨ 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:
>
> ```javascript
> 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"]`
```css
/* .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:
```javascript
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)**
```javascript
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 `.`
## 💾 Database Migration (Before Upgrading)
To apply the database migration, run the following script:
[Config Service](https://bitbucket.org/bhivedevs/alpha-helm-charts/src/master/dbscripts/config-service/24.11.0.0.8-prod/migration.sql)
## 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 |
---
### Author:  [@shiv](https://community.neutrinos.com/u/shiv)
#### Post date: [November 21, 2024, 5:59am UTC](https://community.neutrinos.com/t/alpha-platform-release-october-end-2024/102/2 "2024-11-21T05:59:06Z")
> [@doomedCode](#):
>
> The format for selecting a cell is =\> `[data-column-name="column name"][data-column-value="column value"]`
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?
---
### Author:  [@shiv](https://community.neutrinos.com/u/shiv)
#### Post date: [November 21, 2024, 6:11am UTC](https://community.neutrinos.com/t/alpha-platform-release-october-end-2024/102/3 "2024-11-21T06:11:24Z")
Really appreciate the introduction of custom validation for form fields. 🔥
Does this also allow for reuse of validation functions across different form fields and/or different pages?
---
### Author:  [@doomedCode](https://community.neutrinos.com/u/doomedCode)
#### Post date: [November 21, 2024, 7:37am UTC](https://community.neutrinos.com/t/alpha-platform-release-october-end-2024/102/4 "2024-11-21T07:37:02Z")
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
---
### Author:  [@doomedCode](https://community.neutrinos.com/u/doomedCode)
#### Post date: [November 21, 2024, 7:39am UTC](https://community.neutrinos.com/t/alpha-platform-release-october-end-2024/102/5 "2024-11-21T07:39:23Z")
As of now, it does not.
But we are thinking of solving the reusability problem across the workflow studio editors.
Stay tuned