Add MicroProcessFlowItem to MicroProcessFlow inside table

[naotoxxx]

Hello i'm triying to add a custom MicroProcessFlowItem (with diferents icons) but i don't know what's wrong with my example code:

<Table id="table" enableSelectAll="false" rows="{odataModel>/}" enableBusyIndicator="true" ariaLabelledBy="title" paste="onPaste">
<columns>
	<Column autoResizable="true">
		<m:Label text="Sales order item"/>
		<template>
			<layout:VerticalLayout>
				<m:Button class="sapUiTinyMarginBeginEnd" icon="sap-icon://alert" type="Ghost"
					text="{odataModel>id}">
					<m:customData>
						<m:BadgeCustomData key="badge" value="{odataModel>idCountDocs}"/>
					</m:customData>
				</m:Button>
			</layout:VerticalLayout>
		</template>
	</Column>
	<Column autoResizable="true">
		<m:Label text="Etapa"/>
		<template>
			<m:Link text="{odataModel>desc}" wrapping="true"/>
		</template>
		<template>
			<comm:MicroProcessFlow renderType="NoWrap">
			</comm:MicroProcessFlow>
		</template>
	</Column>
</columns>
</Table>

And this is my function that is responsible to add the items based on the data associated:

updateFinished2 : function() {
	var that = this,
	oTable	 = this.getView().byId("table");
	oTable.getRows().forEach(function (oItem) {
		oItem.getAggregation("cells")[2].addContent([
			new MicroProcessFlowItem({icon:"sap-icon://alert", state:"Success"}),
			new MicroProcessFlowItem({icon:"sap-icon://address-book", state:"Error"})
		]);
	});
}

But i get this error:

Can someone help me or if you soome example i´ll apreciate

[Bibhu · Accepted solution]

Hi naotoxxx,

The above code gives an error because the addContent method is expecting a single object, not an array.

updateFinished() {
    const oTable = this.getView().byId("table");

    oTable.getRows().forEach((oItem) => {
        const oChart = oItem.getCells()[1];

        // Create an array of item properties
        const aItemProperties = [
            { icon: "sap-icon://alert", state: "Success" },
            { icon: "sap-icon://address-book", state: "Error" }
        ];

        // Clear existing content if needed
        oChart.removeAllContent();

        // Loop through the properties and create MicroProcessFlowItem instances
        aItemProperties.forEach(({ icon, state }) => {
            const oMicroProcessFlowItem = new MicroProcessFlowItem({ icon, state });
            oChart.addContent(oMicroProcessFlowItem);
        });
    });
}

Reference:

Array indexing in JavaScript starts from zero, so oItem.getCells()[1] would refer to the second cell. As Column "Etapa" is at second. (May be a typo)

BR,
@Bibhu 

[naotoxxx · Accepted solution]

I really preciatte your time for answer me :), thank you it really helps me