cancel
Showing results for 
Search instead for 
Did you mean: 

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

HenrikD
Participant
0 Kudos

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
Explorer
0 Kudos

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?

View Entire Topic
maheshpalavalli
Active Contributor

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
Participant

Hi Mahesh,

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

hemil_1993
Explorer
0 Kudos

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
Explorer
0 Kudos

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