How can I make a column editable on Fiori Element List report?

[HenrikD]

Hi,

I trying to create a Fiori Element List report where one of the columns is enabled for input. It’s not an option to use an Object Page. Users have to be able input data directly on the list.

So far, I have not been able to find a solution

Any input is welcome!

[v_j3]

A thought... could you extend your Fiori List Report application to add a new column, and then replace(use same field names and such) the existing column with a new editable column?

[maheshpalavalli · Accepted solution]

You have to do it without the list report template via a smart table or something as the List Report pattern follows a specific use case where the first page is display-only and to edit or create, the user has to navigate to the object page, as per the Fiori guidelines:

https://experience.sap.com/fiori-design-web/list-report-floorplan-sap-fiori-element/

[HenrikD · Accepted solution]

Hi Mahesh,

That's the same conclusion I have come to, but it would be nice if it was possible 🙂

[hemil_1993 · Accepted solution]

Hi henrikdamhj.andersen2

This is possible by doing custom, For that you have to take all columns which you want to be editable.so first you have to take button on table's toolbar. and then you can take JSON model in which you have to manage edit mode like below given code.

this.oJSONModel.setProperty("/bTableEditMode", true);

In custom columns you can bind like this.

	<table:Column width="15em">
		<Label
			text="Comment"/>
		<table:customData>
			<core:CustomData key="p13nData" value='\{"columnKey": "COMMENT", "leadingProperty": ["COMMENT"]}'/>
		</table:customData>
		<table:template>
			<smartField:SmartField value="{COMMENT}" editable="{oJSONModel>/bTableEditMode}"
				change="onFieldChange" wrapping="false"/>
		</table:template>
	</table:Column>

then add custom footer on click of Edit and took 2 buttons for Save and Cancel.

_renderFooter: function () {
			var oFooter = this.oPage.getFooter();
			oFooter.removeAllContent()
				//	this.oSaveButton.destroy();
			this.oSaveButton = new sap.m.Button({
				text: "Save",
				type: "Emphasized",
				blocked: false,
				press: this.handleBulkEditingSave.bind(this)
			});
			var oCancelButton = new sap.m.Button({
				text: "Cancel",
				type: "Transparent",
				press: this.handleBulkEditingCancel.bind(this)
			});
			oFooter.addContent(new sap.m.ToolbarSpacer()).addContent(this.oSaveButton).addContent(
				oCancelButton);
		},

and on Save you try below code

that.oDataModel.submitChanges({
				groupId: "GridChanges",
				success: function (oData, oResponse) {
                                // do refresh table
				}.bind(this),
				error: function (oError) {
					jQuery.sap.log.error("Error while submitting changes", JSON.strigify(oError));

				}

			})

Regards,
Hemil

[madhav15 · Accepted solution]

Hi @hemil_1993,

did you take smart table for that? Because when I tried with responsive and grid table I was not able to achieve this.

Regards, 

Madhav

[arunbharathi]

Hello,

Editing the List Report records without navigating to the object page is possible via the multi-edit dialog.

Please check https://sapui5.hana.ondemand.com/#/topic/7cc4f04364c540c397130ff92f84c3ca

Thanks,

Arun