How to add and use JSON file to mdk project.

[Kushagraindore]

Hello Experts,
I have created one MDK project using backend services and now i want to add some of the dummy JSON data into Card & Buttons in this existing project. I want to achieve this view kindly give me guidance for this situation.

Thanks and regards
Kushagra Sharma
🍁

#MDK SAP Mobile Services 

[bill_froelich]

Depending on how / where you want to use the dummy data you have options.

For controls that target entity sets you can use a string target pointing to an MDK rule that simply returns your JSON sample data.  Then you specify the bindings the same way.

You can also use a rule before navigating to a page to define the default binding object (JSON) and call setActionBinding before navigating to the page.

/**
 * Describe this function...
 * @Param {IClientAPI} clientAPI
 */
export default function SetDefaultAndNav(clientAPI) {
    let myJSONSampleData = {
        "Prop1": "My Sample Data1",
        "Prop2": "More Sample Data",
        "ListData": [
           {
              "Item": "Value1"
           },
           {
              "Item": "Value2"
           }
        ]
     };
     
     clientAPI.getPageProxy().setActionBinding(myJSONSampleData);
     return clientAPI.getPageProxy().executeAction('/SCN_00028/Actions/NavTo_MyPage.action');    
}

There are some other ways as well, it all depends on how and where you are wanting to use it.

Another option that while more complex to setup initially results is less work later to switch to real data would be to mockup a demo service with the same metadata structure as your real backend and populate it was sample data.  Then your application bindings are all valid and you just swap the service URL in the Mobile Services destination when your real service is ready to go.

[Kushagraindore]

Hello @bill_froelich , I appreciate your reply.
I have added this code to the LocalData.js file within the rules, and also created a custom page for consumption of this rule, which is MyPage.page.
As a novice in SAP MDK, I am having trouble understanding the view. Can you provide me with more information?

[bill_froelich]

What the rule is doing is setting the default binding object for the next page.  This means that your controls on the page can directly bind to the properties in that default object.  So using my example rule below the default object has two properties and an Array of records.  Please note I have a couple typo in my sample where the execution action should have called NavTo_MyPage.action instead of .page and it also missing the return which is needed for the page to pickup the default binding object that was set.  I have edited the answer to include my actual rule.

In my sample I use controls like Key Value to show the properties and an Object Table to show the Array items.  Here is the metadata for MyPage.page

{
	"Controls": [
		{
			"_Type": "Control.Type.SectionedTable",
			"_Name": "SectionedTable0",
			"Sections": [
				{
					"_Type": "Section.Type.KeyValue",
					"_Name": "SectionKeyValue0",
					"Header": {
						"_Name": "SectionHeader1",
						"AccessoryType": "None",
						"UseTopPadding": true,
						"Caption": "Key Value Section"
					},
					"Visible": true,
					"EmptySection": {
						"FooterVisible": false
					},
					"Separators": {
						"TopSectionSeparator": false,
						"BottomSectionSeparator": true,
						"HeaderSeparator": true,
						"FooterSeparator": true,
						"ControlSeparator": true
					},
					"KeyAndValues": [
						{
							"Value": "{Prop1}",
							"_Name": "KeyValue0",
							"KeyName": "First Property",
							"Visible": true
						},
						{
							"Value": "{Prop2}",
							"_Name": "KeyValue1",
							"KeyName": "Second Property",
							"Visible": true
						}
					],
					"MaxItemCount": 1,
					"Layout": {
						"NumberOfColumns": 2
					}
				},
				{
					"_Type": "Section.Type.ObjectTable",
					"Target": "{ListData}",
					"_Name": "SectionObjectTable0",
					"Header": {
						"_Name": "SectionHeader0",
						"AccessoryType": "None",
						"UseTopPadding": true,
						"Caption": "Data Bound Object Table"
					},
					"Visible": true,
					"EmptySection": {
						"FooterVisible": false
					},
					"Separators": {
						"TopSectionSeparator": false,
						"BottomSectionSeparator": true,
						"HeaderSeparator": true,
						"FooterSeparator": true,
						"ControlSeparator": true
					},
					"ObjectCell": {
						"Title": "{Item}",
						"DisplayDescriptionInMobile": true,
						"PreserveIconStackSpacing": false,
						"AccessoryType": "None",
						"Tags": [],
						"AvatarStack": {
							"Avatars": [],
							"ImageIsCircular": true,
							"ImageHasBorder": false
						},
						"AvatarGrid": {
							"Avatars": [],
							"ImageIsCircular": true
						},
						"Selected": false,
						"ContextMenu": {
							"Items": [],
							"PerformFirstActionWithFullSwipe": true,
							"LeadingItems": [],
							"TrailingItems": []
						}
					},
					"DataPaging": {
						"ShowLoadingIndicator": false,
						"PageSize": 50
					},
					"HighlightSelectedItem": false,
					"Selection": {
						"ExitOnLastDeselect": true,
						"LongPressToEnable": "None",
						"Mode": "None"
					}
				}
			],
			"FilterFeedbackBar": {
				"ShowAllFilters": false,
				"_Type": "Control.Type.FilterFeedbackBar"
			},
			"OnRendered": "/SCN_00028/Rules/OnRenderedCheck.js"
		}
	],
	"_Type": "Page",
	"_Name": "MyPage",
	"Caption": "MyPage",
	"PrefersLargeCaption": true
}

and a screen shot of the resulting display