Hi ServiceNow Community, my requirement is to get project state instead of phase(first column) on the project summary custom dashboard present on analytics link of project workspace. How can it be configured using the UI builder?
Hello @nowitsvashu,
You can achieve this by configuring the Project Summary custom dashboard using the UI Builder. Follow the steps below:
Steps:
1. Open the dashboard in UI Builder
Navigate to:
2. Duplicate the Phase container
- In the structure tree, locate the Phase container.
- Duplicate it and rename the components to State.
- Hide the visibility of the original Phase component.
3. Modify the data source
- Go to the Project Workspace Script Include and edit the getDashboardData function and add the _getStateChoices function below _getPhaseChoices function :
Functions
getDashboardData: function(projectId, table) {
let gr = new GlideRecord(table);
let phaseChoiceListArr = this._getPhaseChoices(table);
// Add a new helper for state choices
let stateChoiceListArr = this._getStateChoices(table);
gr.get(projectId);
if (!gr.canRead()) {
return {
status: 'error',
statusCode: '403'
};
}
//caluclate time elapsed
let timeElapsedCal = new global.TimeElapsedCalculation();
let timeElapsed = timeElapsedCal.calculateTimeElapse(projectId),
percentComplete, phase, projStatusColor, projStatus, state;
const executionTypeId = this._getphaseTypeId(gr.getValue('execution_type'));
percentComplete = gr.getDisplayValue('percent_complete');
phase = gr.getValue('phase');
projStatus = gr.getDisplayValue('status');
projStatusColor = gr.getValue('status');
// Capture the record's state
state = gr.getDisplayValue('state');
return {
phase,
phaseChoiceListArr,
state, // added
stateChoiceListArr,
executionTypeId,
projStatus,
projStatusColor,
percentComplete,
timeElapsed
};
},
_getPhaseChoices: function(table) {
let phaseChoiceListArr = [],
phaseChoice, phaseChoiceList = GlideChoiceList.getChoiceList(table, 'phase');
for (var i = 0; i < phaseChoiceList.size; i++) {
phaseChoice = phaseChoiceList.getChoice(i);
let phaseObj = {
id: phaseChoice.getValue(),
label: phaseChoice.getLabel(),
progress: "none",
disabled: "none"
};
phaseChoiceListArr.push(phaseObj);
}
return phaseChoiceListArr;
},
_getStateChoices: function(table) {
let stateChoiceListArr = [],
stateChoice,stateChoiceList = GlideChoiceList.getChoiceList(table, 'state');
for (var i = 0; i < stateChoiceList.size; i++) {
stateChoice = stateChoiceList.getChoice(i);
let stateObj = {
id: stateChoice.getLabel(),
label: stateChoice.getLabel(),
progress: "none",
disabled: "none"
};
stateChoiceListArr.push(stateObj);
}
return stateChoiceListArr;
},
4.Update the State stepper configuration
- In UI Builder, open the State_displayValue_stepper configuration.
- Update both the Items and Selected item fields with the required state-based data logic.
Items:
/**
* @param {params} params
* @param {api} params.api
* @param {TransformApiHelpers} params.helpers
*/
function evaluateProperty({
api,
helpers
}) {
const selectedItem = api.data.get_project_dashboard_data_1.output.result.state;
const stateChoiceList = api.data.get_project_dashboard_data_1.output.result.stateChoiceListArr;
for (let i = 0; i < stateChoiceList.length; i++) {
if (selectedItem != stateChoiceList[i]["id"] || selectedItem === stateChoiceList[stateChoiceList.length - 1]["id"]) {
stateChoiceList[i]["progress"] = "done";
} else break;
}
return stateChoiceList;
}
Selected Item:
/**
* @param {params} params
* @param {api} params.api
* @param {TransformApiHelpers} params.helpers
*/
function evaluateProperty({
api,
helpers
}) {
const stateType = api.data.get_project_dashboard_data_1.output.result.state;
const stateChoiceList = api.data.get_project_dashboard_data_1.output.result.stateChoiceListArr;
const selectedItem = (stateType === stateChoiceList[stateChoiceList.length-1]["id"]) ? "" : stateType;
return selectedItem;
}
5. Save and verify
- Save your configuration.
- Open the Project Workspace and check the Analytics > Project Summary dashboard to confirm the project state now appears instead of the phase.
If my response helped, please mark it as the accepted solution so others can benefit as well.
