Application with SmartTable and JSONModel binding

[Former Member]

Hi All,

I'm trying to develop SAPUI5 application using smart table with the json model binding. While running the program I'm getting error I'm sharing that snapshot with you.I'm sharing my code, please suggest me to how to make this work.

And please say how to refer JSONModel data/entity set to the annotations.xml file

In view:

<smartTable:SmartTable 
        id="smartTable_ResponsiveTable"
        smartFilterId="smartFilterBar" 
        tableType="ResponsiveTable" 
        editable="false"
        entitySet="tableSet"
        useVariantManagement="false"
        useTablePersonalisation="false" 
        header="Products" 
        showRowCount="true"
        useExportToExcel="false" 
        enableAutoBinding="true"
        initiallyVisibleFields="name">
    </smartTable:SmartTable>

In Controller:

var array = [{
                "name" : "Dinesh",
                "id" : "123"
            },
            {
                "name" : "Nikhil",
                "id" : "456"
            },{
                "name" : "Pulkit",
                "id" : "789"
            }];
            var model = new sap.ui.model.json.JSONModel();
            model.setData({
                tableSet: array
            });
            this.getView().byId("smartTable_ResponsiveTable").setModel(model);
            });

I'm getting above error after running it. According to my knowledge smart table not able to get the data( that is entity set configuration issue). Please suggest me how to fix this and how to write annotations.xml file for JSONModel data

Regards,
Sai Ram Dinesh Pallapotu

[Former Member]

Hi there. I used a Json Model with smart table. My JSON model is named "TableMlstJsonModel" inside of my controller. So you can see in the following how I used smart table with JSON model. You need to define custom list and custom columns:

<smartTable:SmartTable id="__smartTableMlst" entitySet="ProjectHeaderMstSet" tableBindingPath="TableMlstJsonModel>/ProjectHeaderMstSet"
	header="{i18n>tableMlstTitle}" showRowCount="true" tableType="Responsive" showFullScreenButton="false" useVariantManagement="false"
	enableAutoBinding="true" ignoredFields="ProjectDefinition,Method,Refnumber" useExportToExcel="false"
	initiallyVisibleFields="MilestoneNumber,Description,OffsetMilestoneDate,OffsetMilestoneDateUnit">
	<smartTable:customToolbar>
		<m:OverflowToolbar design="Transparent">
			<m:ToolbarSpacer/>
			<m:Button type="Transparent" press="onRefreshMlstBtnPress" icon="sap-icon://refresh" tooltip="{i18n>refreshBtnTooltip}"/>
			<m:Button type="Transparent" press="onAddMlstBtnPress" icon="sap-icon://add" tooltip="{i18n>createBtnTooltip}"
				enabled="{objectView>/tableMlstBtnAddEnabledFinal}"/>
			<m:Button type="Transparent" press="onDeleteMlstBtnPress" icon="sap-icon://delete" tooltip="{i18n>deleteBtnTooltip}"
				enabled="{objectView>/tableMlstBtnDelEnabledFinal}"/>
		</m:OverflowToolbar>
	</smartTable:customToolbar>
	<m:Table id="tableMlst" mode="MultiSelect" busy="{objectView>/tableMlstBusy}">
		<m:columns>
			<m:Column>
				<m:customData>
					<core:CustomData key="p13nData" value='\{"columnKey": "MilestoneNumber", "leadingProperty": "MilestoneNumber"}'/>
				</m:customData>
				<m:Text text="{/#ProjectHeaderMst/MilestoneNumber/@sap:label}"/>
			</m:Column>
		</m:columns>
		<m:items>
			<m:ColumnListItem type="Navigation" press="onPress">
				<m:cells>
					<m:Text text="{path: 'TableMlstJsonModel>MilestoneNumber', formatter: '.formatter.intNumber'}"/>
					<m:Text text="{TableMlstJsonModel>Description}"/>
					<m:Text text="{TableMlstJsonModel>OffsetMilestoneDate}"/>
					<m:Text text="{TableMlstJsonModel>OffsetMilestoneDateUnit}"/>
					<m:Text text="{TableMlstJsonModel>Activity}"/>
					<m:Text text="{TableMlstJsonModel>ActivityName}"/>
					<m:Text text="{TableMlstJsonModel>Aedat}"/>
					<m:Text text="{TableMlstJsonModel>Aenam}"/>
					<m:Text text="{TableMlstJsonModel>Erdat}"/>
					<m:Text text="{TableMlstJsonModel>Ernam}"/>
					<m:Text text="{TableMlstJsonModel>MlstSmlnr}"/>
					<m:Text text="{TableMlstJsonModel>Network}"/>
					<m:Text text="{TableMlstJsonModel>NetworkName}"/>
				</m:cells>
			</m:ColumnListItem>
		</m:items>
	</m:Table>
</smartTable:SmartTable>
<br>

But what you see here is not 100% related to the message that you see. The message is regarding the initiallyVisibleFields which is missing in you table definition. I just copied whole code because many people said it is not possible to use smart table with Json model or named models. All of these statements are wrong. You can use it but you need to provide custom list, as I did.

[former_member679019]

did u have an annotation file to go along with it? I see your entitySet attribute references something.

With your implementation, do your filter and sort capabilities work? Mine does not seem to..

[Rohit_Patil]

hi sir

can u send me full code..

[former_member835962]

Good suggestion.

[former_member874443]

Hello Sir, can you please provide code here. controller and xml as I need same configuration in my project

[ahmedjilani0011]

sir please provide me a controller code

[stefan_schreck]

Hi Sairam,

Kalyan is right. But let me add the information that the OData metamodel of SAP UI5 evaluates the app descriptor (manifest.json) in order to know where to find the annotations. THus, if you want to efine your columns et al. in a local annotation file, this annotation file must be registered correctly in the manifest.json.

Example:

	"dataSources": {
			"mainService": {
				"uri": "/sap/opu/odata/sap/SEPMRA_PROD_MAN/",
				"type": "OData",
				"settings": {
					"annotations": [
						"localAnnotations"
					],
					"localUri": "localService/metadata.xml"
				}
			},
			"localAnnotations": {
				"uri": "annotations/annotations.xml",
				"type": "ODataAnnotation",
				"settings": {
					"localUri": "annotations/annotations.xml"
				}
			}
		},

[venkatakalyan_karanam]

Hi Sairam

As per the SAP documentation, smart controls works on metadata and oData.

So Please look for any alternative approach with Custom controls.

Thanks and Regards

Kalyan

[venkatakalyan_karanam]

Hi Sai Ram

Smart Controls need OData metadata info like EntitySet/Attributes to get the data from the service. In the explorer they used JSON Model because that works based on MockServer. MockServer mimics the oData calls, moreover you can find the JSON file name as same name with the EntitySet which is defined in the metadata file of ODATA.

There is no way to use Smart Controls with JSON files directly, they are designed and intended for the ODATA model.

Thanks and Regards

Kalyan

[Former Member]

Hi Venkatakalyan,

Thank you for your reply. You are correct. But I got requirement like develop an application using smart controls with JSON model data. So is there any way that, by using mock server can I make a relation between JSON model data and metadata.xml file.

Regards,

Sai Ram Dinesh

[Former Member]

No there is not - metadata.xml always comes from oData services for oData model not for JSON model.

[Former Member]

I don't think you can use the smart table with JSON model. My understanding is that smart tables are designed to work only with oData models as they generate columns and rows based on the metadata an annotations. Although it would be very useful to use the smart table with JSON model.

[Former Member]

Hi Radek,

In the explored, they gave smart control sample applications with JSON file data by using metadata.xml(we can write annotations here) and mockserver.js. So like that is there any loop hole to use JSON model data?