Skip to Content
avatar image
Former Member

Application with SmartTable and JSONModel binding

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

capture.png (21.2 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • avatar image
    Former Member
    Dec 07, 2017 at 04:40 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Dec 23, 2016 at 01:39 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

    • 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?

  • Dec 26, 2016 at 05:46 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 01, 2017 at 11:10 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 13, 2017 at 08:56 AM

    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"
    				}
    			}
    		},
    
    Add comment
    10|10000 characters needed characters exceeded