How to add dynamically formcell or button table in SectionedTable0 of Current(Main) MDK Page

[dwipal]

I am working on dynamically adding formcell or button based on the Odata action response. I have referred to this link reference link , but it opens a new page of Main page rather than refreshing the current one. 

{
	"Controls": [
		{
			"FilterFeedbackBar": {
				"ShowAllFilters": false,
				"_Type": "Control.Type.FilterFeedbackBar"
			},
			"_Type": "Control.Type.SectionedTable",
			"_Name": "SectionedTable0",
			"Sections": [
				{
					"Separators": {
						"TopSectionSeparator": false,
						"BottomSectionSeparator": true,
						"HeaderSeparator": true,
						"FooterSeparator": true,
						"ControlSeparator": true
					},
					"Controls": [
						{
							"validationProperties": {
								"SeparatorBackgroundColor": "#ff0000",
								"SeparatorIsHidden": false,
								"ValidationViewIsHidden": true
							},
							"Value": "Weekly",
							"_Type": "Control.Type.FormCell.SegmentedControl",
							"_Name": "FormCellSegmentedControl0",
							"IsVisible": true,
							"Separator": false,
							"Caption": "Time Entry",
							"IsEditable": true,
							"ApportionsSegmentWidthsByContent": false,
							"Segments": [
								"Daily",
								"Weekly"
							]
						}
					],
					"Visible": true,
					"EmptySection": {
						"FooterVisible": false
					},
					"_Type": "Section.Type.FormCell",
					"_Name": "SectionFormCell0"
				},
				{
					"Separators": {
						"TopSectionSeparator": false,
						"BottomSectionSeparator": true,
						"HeaderSeparator": true,
						"FooterSeparator": true,
						"ControlSeparator": true
					},
					"Controls": [
						{
							"Value": "Enter Date",
							"_Type": "Control.Type.FormCell.DatePicker",
							"_Name": "FormCellSelectCopyWeekDatePicker",
							"IsVisible": true,
							"Separator": true,
							"Caption": "Select Week",
							"IsEditable": true,
							"Mode": "Date",
							"OnValueChange": "/DemoApp/Rules/FetchSelectedDateTimeBill.js"
						}
					],
					"Visible": true,
					"EmptySection": {
						"FooterVisible": false
					},
					"_Type": "Section.Type.FormCell",
					"_Name": "SectionFormCell1"
				},
				
			]
		}
	],
	"_Type": "Page",
	"_Name": "Main",
	"Caption": "MDKDemoApp",
	"PrefersLargeCaption": true,
	"ActionBar": {
		"Items": [
			{
				"_Name": "ActionBarItem0",
				"Caption": "User Menu",
				"Icon": "sap-icon://customer",
				"Position": "Right",
				"IsIconCircular": false,
				"Visible": true,
				"OnPress": "/DemoApp/Actions/Application/UserMenuPopover.action"
			}
		],
		"_Name": "ActionBar1"
	}
}

Now on selecting date i need to add two more formcell/buttontable in "SectionTable0".So can i do that when i have referred the reference link it is working but it opening the newpage with updated pageRef rather than i need to make it display on the same page after i add those ui controls dynamically.  

pageProxy.binding is undefined

clientAPI.getPageProxy().getActionBinding(); is also undefined

.

/**
 * Describe this function...
 * @Param {IClientAPI} clientAPI
 */

import GetWeekDetailsFromDate from "./GetWeekDetailsFromDate";

export default async function FetchSelectedDateTimeBill(clientAPI) {

    var selectedDateValue =  new Date(clientAPI.evaluateTargetPath('#Page:Main/#Control:FormCellSelectCopyWeekDatePicker/#Value'));
    const date = new Date(selectedDateValue);
    const { startTimeBillDate, endTimeBillDate } = GetWeekDetailsFromDate(date);


    //pageRef has complete page definition of the mentioned page
    let pageRef = clientAPI.getPageDefinition('/DemoApp/Pages/Main.page');
    let pageProxy = clientAPI.getPageProxy();
    let object = clientAPI.getPageProxy().getActionBinding();
    let currentPageControl = pageRef.Controls;
  

    //adding a new action bar dynamically
    let newFormCellTypeTwo = [
        {
          "Separators": {
            "TopSectionSeparator": false,
            "BottomSectionSeparator": false,
            "HeaderSeparator": false,
            "FooterSeparator": false,
            "ControlSeparator": false
          },
          "Layout": {
            "LayoutType": "Horizontal",
            "HorizontalAlignment": "Leading"
          },
          "_Type": "Section.Type.ButtonTable",
          "_Name": "SectionButtonTable22",
          "Visible": true,
          "EmptySection": {
            "FooterVisible": false
          },
          "Buttons": [
            {
              "_Name": "SectionButton42",
              "Title": "App Accelerator",
              "Alignment": "Left",
              "ButtonType": "Text",
              "Semantic": "Tint",
              "Image": "sap-icon://dropdown",
              "ImagePosition": "Trailing",
              "ImageSize": {
                "Height": 20,
                "Width": 20
              },
              "FullWidth": true,
              "Visible": true,
              "Enabled": true
            },
            {
              "_Name": "SectionButton32",
              "Alignment": "Center",
              "ButtonType": "Secondary",
              "Semantic": "Negative",
              "Image": "sap-icon://delete",
              "ImagePosition": "Trailing",
              "ImageSize": {},
              "FullWidth": true,
              "Visible": true,
              "Enabled": true
            }
          ]
        },
        {
          "Separators": {
            "TopSectionSeparator": false,
            "BottomSectionSeparator": true,
            "HeaderSeparator": true,
            "FooterSeparator": true,
            "ControlSeparator": true
          },
          "Controls": [
            {
              "_Type": "Control.Type.FormCell.SimpleProperty",
              "_Name": "FormCellMon2",
              "IsVisible": true,
              "Separator": true,
              "Caption": "Mon",
              "PlaceHolder": "0.00",
              "Enabled": true,
              "IsEditable": true
            },
          ],
          "Footer": {
            "_Name": "SectionFooter1",
            "Caption": "Total : 0.00",
            "Visible": true,
            "UseBottomPadding": true
          },
          "Visible": true,
          "EmptySection": {
            "FooterVisible": false
          },
          "_Type": "Section.Type.FormCell",
          "_Name": "SectionFormCell2NewProj"
        }
      ];
           
      let updatedControls = currentPageControl.map(item=>{
        if(item.Sections){
          newFormCellTypeTwo.map((item)=>{
            pageRef.Controls[0].Sections.push(item);
          });
        }
        return item;
       })
      
       pageRef.Controls = updatedControls;
        clientAPI.executeAction({
           "Name": "/DemoApp/Actions/GenericNavigation.action",
           "Properties": {
               "PageMetadata": pageRef
          }
       });
       

 


}

[bill_froelich]

You cannot redefine the current page metadata after it is rendered like you are trying to do.  If you want to dynamically add additional controls you would need to navigate to a new page.

The typical way to handle this would be to include the controls in the original page but have them hidden using the Visible property.  Then when you have the updated data you can show the additional controls rather than navigating to a new page.

[dwipal]

Thanks for the suggestion @bill_froelich , But what if i want to load the data based on the response I received from the backend as the current given data controls do not support the UI requirement? So what to do in that case ideally hiding them in the original page make them visible according to logic will be not be the ideal solution. Second, if we open the new page by adding dynamically as it is given in the question when we try to fetch the newly added controls using dynamic id but it does not give and pageref has the previous value(object) only.

[dwipal]

And One more thing if we go with hide/visible ui control approach how can i access SectionFormCell2NewProj and SectionButtonTable22. The below code is not working for me. And how to make name dynamically set of buttons inside buttontable is available. how can i access those buttons which is inside sectionButtonTable

 let FormCell = clientAPI.evaluateTargetPath('#Page:Main/#Section: SectionFormCell2NewProj');  

 let SectionButtonTable1 = clientAPI.evaluateTargetPath('#Page:Main/#Section: SectionButtonTable22');  
  

 FormCell.setVisible(true); //not working

[bill_froelich]

When calling evaluateTargetPath you should not have any spaces in the target path. Also if you intend to call other methods on the result you should be using evaluateTargetPathForAPI instead.  That being said, there does seem to be an issue with the return type even from evaluateTargetPathForAPI where setVisible is not valid there.  We will have to look into that further.

The alternative is to use the getControl / getSection methods from clientAPI instead of evaluating target paths.  This does work as expected.

let fcs = clientAPI.getPageProxy().getControl('SectionedTable0').getSection('SectionFormCell2NewProj');
// Toggle the visible state of the section
let newVisible = !fcs.getVisible();
fcs.setVisible(newVisible);

[dwipal]

Thanks @bill_froelich , accessing formcell and section table approach worked as of now. Now what if I want to access buttons inside sectionButtontable, as I need to update the title of a button(SectionButton42). How can I access it and update its title?

[bill_froelich]

We don't currently expose a direct accessor for section table buttons. We are planning to add a specific proxy type for this in an upcoming release.]

Until then your best option will be to use a rule for the button title and trigger a redraw of the section to update the title.