Skip to Content

How to get a new full page XML view navigate from split screen(master/Detail)

Hi All,

I want to add a new full screen view while navigate from split control, Now, the code which i shared here is working master screen is as static, inside the detailPage views are navigating from one to other ., it's not display as full screen. I attach the screen shot. Approval history screen want as a full screen view. Pls suggest some idea.
Component.js


 config: {
					resourceBundle: "",
					serviceConfig: {
						name: "",
						serviceUrl: "/sap/opu/odata/sap/ZCOS_SRV/"
				 	}
				},
			  	routing: {
					config: {
						viewType: "XML",
						viewPath: "SalesOrder.views",
						clearTarget: false,
						controlId: "idSplitApp",
						controlAggregation: "masterPages",
						transition: "show"
					},
					routes: [
					  { 
						 pattern: "",
						 name: "Master",
						 target: "Master",
						 controlAggregation: "masterPages"
					  },
					  {
						 pattern: "Detail/{EmployeeId},{WorkitemId}",
						 name :"Detail",
						 target: "Detail",
						 controlAggregation: "detailPages"
					  },
					  {
						  pattern: "ProductInfo",
						  name: "ProductInfo",
						  target: "ProductInfo",
						  controlAggregation: "detailPages"
					  } ,
					  {
						  pattern: "ProductInfo2",
						  name: "ProductInfo2",
						  target: "ProductInfo2",
						  controlAggregation: "detailPages"
					  }
					],
					targets: {
						Master: {
							viewName: "Master",
							controlAggregation: "masterPages"
						},
						Detail: {
							viewName: "Detail",
							controlAggregation: "detailPages"
						},
						ProductInfo: {
							viewName: "Product",
							controlAggregation: "detailPages"
						},
						ProductInfo2: {
							viewName: "Appdet",
							controlAggregation: "detailPages"
						}
					}
				}
			},

split2.png (65.4 kB)
split.png (95.9 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • avatar image
    Former Member
    Jul 29, 2017 at 11:34 PM

    Hi Vinoth,

    I have a similar requirement in my project. Can you please let me know about any possible solution you went with?

    Thanks and Regards,

    Rishin

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 04, 2017 at 03:15 AM

    For Cross-App Navigation, use subroutes.

    "routes": [{
    
    "pattern": "",
    
    "name": "overview",
    
    "view": "App",
    
    "targetControl": "idApp",
    
    "targetAggregation": "pages"
    
    },
    
    {
    
    "pattern": "splitapp",
    
    "name": "splitApp",
    
    "view": "SplitApp",
    
    "targetControl": "idApp",
    
    "targetAggregation": "pages",
    
    "subroutes": [{
    
    "pattern": "splitapp/",
    
    "view": "Master",
    
    "targetControl": "idSplitApp",
    
    "targetAggregation": "masterPages",
    
    "subroutes": [{
    
    "pattern": "splitapp/",
    
    "view": "Detail",
    
    "targetAggregation": "detailPages"
    
    },{
    
    "pattern": "splitapp/detail2",
    
    "view": "Detail2",
    
    "name": "detail2",
    
    "targetAggregation": "detailPages"
    
    }]
    
    }]
    
    }]
    

    Calls to navigating views are done using navTo() method as usual in controllers.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 23 at 10:47 AM

    Hi,

    Use This.

    routing: {
    					config: {
    						viewType: "XML",
    						viewPath: "SalesOrder.views",
    						clearTarget: false,
    						transition: "show"
    					},
    					routes: [
    					  { 
    						 pattern: "",
    						 name: "Master",
    						 target: "Master",
    						 controlAggregation: "masterPages"
    					  },
    					  {
    						 pattern: "Detail/{EmployeeId},{WorkitemId}",
    						 name :"Detail",
    						 target: "Detail",
    						 controlAggregation: "detailPages"
    					  },
    					  {
    						  pattern: "ProductInfo",
    						  name: "ProductInfo",
    						  target: "ProductInfo",
    						  controlAggregation: "detailPages"
    					  } ,
    					  {
    						  pattern: "ProductInfo2",
    						  name: "ProductInfo2",
    						  target: "ProductInfo2",
    						  controlAggregation: "detailPages"
    					  },
    {
    						  pattern: "FullScreen",
    						  name: "fullScreenView",
    						  target: "fullScreenView",
    						  controlAggregation: "pages"
    					  }
    					],
    					targets: {
    						Master: {
    							viewName: "Master",
    							controlAggregation: "masterPages",
    							controlId: "idSplitApp"
    						},
    						Detail: {
    							viewName: "Detail",
    							controlAggregation: "detailPages",
    							controlId: "idSplitApp"
    						},
    						ProductInfo: {
    							viewName: "Product",
    							controlAggregation: "detailPages",
    							controlId: "idSplitApp"
    						},
    						ProductInfo2: {
    							viewName: "Appdet",
    							controlAggregation: "detailPages",
    							controlId: "idSplitApp"
    						},
    						fullScreenView: {
    							viewName: "fullScreenView",
    							controlAggregation: "pages",
    							controlId: "idApp"
    						}
    					}
    				}
    

    In App.view.xml u need to all App as below.

    <mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="SalesOrder.views"
    	xmlns:html="http://www.w3.org/1999/xhtml">
    	<SplitApp id="idSplitApp" />
    	<App id="idApp" />
    </mvc:View>
    

    Regards,

    Gururaj

    Add comment
    10|10000 characters needed characters exceeded