I have 2 master pages & a detail page. On Master 1 page, I have List items, On clicking one, it will navigate to 2nd Master page. There i have some selections & a button to navigate to detail page. I tried to navigate from detail page to 2nd Master page. But i can't make it. I goes straight to 1st Master Page. How can i achieve this?. Here is my view structure.
<SplitApp id="MyApp" mode="HideMode" >
<masterPages>
<Page id="master1">
<content>
....(List item)....
</content>
</Page>
<Page id="master2">
<content>
....(contents in fragment)....
</content>
</Page>
</masterPages>
<detailPages title="Detail">
<mvc:XMLView viewName="demo.view.Detail"/>
</detailPages>
</SplitApp>
You should make a reference to your app control, and using its method .toMaster(target) you could navigate to any master page, including 'master2'. E.g.:
this.byId("MyApp").toMaster(this.createId("master2"));
Have a look at this jsbin to see this in action:
http://jsbin.com/xocavo/1/edit?html,output
Related
I have added two buttons(Approve, Reject) in Process Flow node. But I am not able to click on that buttons.
Can anyone help on this, How we can click on that buttons?
sap.suite.ui.commons.sample.ProcessFlow
ProcessFlow
Code
<ProcessFlow id="processflow1" scrollable="false" nodePress="onNodePress" foldedCorners="true" nodes="{/nodes}" lanes="{/lanes}">
<nodes>
<ProcessFlowNode id="processflownode1" laneId="{lane}" nodeId="{id}"
title="{title}" titleAbbreviation="{titleAbbreviation}"
children="{children}" state="Neutral" stateText="{stateText}"
texts="{texts}" focused="false" selected="false"
highlighted="false" isTitleClickable="false">
<zoomLevelOneContent>
<m:HBox height="100%" justifyContent="SpaceBetween" renderType="Bare">
<m:Button type="Accept" text="Approve" press="onPress"></m:Button>
<m:Button text="Reject" type="Reject"/>
</m:HBox>
</zoomLevelOneContent>
</ProcessFlowNode>
</nodes>
<lanes>
<ProcessFlowLaneHeader laneId="{id}" iconSrc="{icon}" text="{label}" position="{position}"/>
</lanes>
</ProcessFlow>
Screenshot
This feature is not possible with ProcessFlowNode. You can use nodePress event to open an action sheet or popover for your actions according to your need.
For more information please check:
Process Flow | SAP Fiori Design Guidelines
I have a requirement where I need to place an sap.m.Page within another sap.m.Page, which I am aware is not recommended. The issue I'm facing is that I'm trying to enable scrolling for only the outer page; but the scrolling does not dynamically increase as I expand content inside the inner page. There is a lot of vertical content inside the inner page and is not entirely visible since the scrolling does not increase along with the expanded panels.
Even this does not resolve my issue. Kindly assist.
SAPUI5 version: 1.38.37
Layout of the outer page:
<mvc:View ...>
<Page showHeader="false">
<content>
<IconTabBar>
<items>
<IconTabFilter>
<content>
<mvc:XMLView viewName="namespace.view.InnerView1" displayBlock="true"/>
</content>
</IconTabFilter>
<IconTabSeparator icon=""/>
.
//multiple IconTabFilters here
.
</items>
</IconTabBar>
</content>
</Page>
</mvc:View>
Layout of the inner page (InnerView1):
<mvc:View ...>
<Page showHeader="false" enableScrolling="false">
<content>
.
//multiple expandable/collapsible Panels here
.
</content>
<footer floatingFooter="false">
<Toolbar>
<ToolbarSpacer/>
.
//multiple Buttons here
.
</Toolbar>
</footer>
</Page>
</mvc:View>
The Panels in the inner page are initially collapsed but they are expandable. But if all Panels are expanded in the running app, then the last couple of Panels are not accessible with the scrolling. i.e. the scrollbar does not adjust as per the panels' height.
Try using:
enableScrolling="false" //for disabling
enableScrolling="true" //for enabling
I developed one app about months ago with Prism. It's great tool that make perfect structure for my app.
However, today I tried to pick up that app and fix some things that pending for a long time. I used Master Detail page in my app, and today I suddenly found that actually the structure for how I developed this Master Detail page using Prism is kind of out of my knowledge.
So, here it is.
Basically my MasterDetailPage is like this:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:b="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
mc:Ignorable="d"
x:Class="JapaneseLearnPrism.Views.MenuPage">
<MasterDetailPage.Master>
<NavigationPage Title="Menu" Icon="ic_hamburger.png">
<x:Arguments>
<ContentPage Title="{Binding Title}">
<ListView ItemsSource="{Binding MenuItems}"
SelectedItem="{Binding SelectedMenuItem, Mode=TwoWay}"
SeparatorColor="LightGray"
RowHeight="60"
SeparatorVisibility="Default"
BackgroundColor="#e8e8e8">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,10,0,10"
Spacing="20">
<Label Text="{Binding PageIconText}" FontFamily="{StaticResource FontAwesomeSolid}" FontSize="Medium" VerticalOptions="Center" />
<Label Text="{Binding Title}" FontSize="Medium" VerticalOptions="Center" TextColor="Black" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Behaviors>
<b:EventToCommandBehavior EventName="ItemTapped" Command="{Binding NavigateCommand}" />
</ListView.Behaviors>
</ListView>
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Master>
</MasterDetailPage>
And the navigation path is this in App.xaml.cs file.
await NavigationService.NavigateAsync(nameof(MenuPage) + "/" + nameof(NavigationPage) + "/" + nameof(Views.MainPage));
But if I look at lots of the Xamarin.Forms samples, the MasterDetailPage is actually different.
They are going to do like below:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
x:Class="MasterDetailPageNavigation.MainPage">
<MasterDetailPage.Master>
<local:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
And that's from Microsoft's official website. The Master Page in above is actually just one ContentPage, however, the Detail page should be NavigationPage, that one I can understand because it makes sense.
However, in my Prism app, the MasterPage also has to be a NavigaionPage, why is that? Any one can help on this?
Thanks.
You can take a look at this wonderfull blog about How to make Master-Detail Page Navigation menu in Xamarin Forms with Prism.
If you scroll down to the bottom of the post, you will see some description on why it works this way, Quoting:
Note: Navigation in Prism is all based on this url format where we can define to which pages we want to go, and it can be something like this: ViewA/ViewB/ViewC/ViewD
... and if you remember we are inside of MasterDetail page so navigating from MasterDetail will get result that those pages will go to Detail part of it... and that is great for us, we have menu in side of master page and choosing menu items will open pages as Detail pages.
The way that Prism Navigation is designed, it makes sense that a DetaiPage goes inside the MasterDetail, so basically it keeps the Prism Logic of doing the Navigation.
Quoting the Basics of Prism Navigation
Navigating in a Prism application is conceptually different than standard navigation in Xamarin.Forms. While Xamarin.Forms navigation relies on a Page class instance to navigate, Prism removes all dependencies on Page types to achieve loosely coupled navigation from within a ViewModel. In Prism, the concept of navigating to a View or navigating to a ViewModel does not exist. Instead, you simply navigate to an experience, or a unique identifier, which represents the target view you wish to navigate to in your application.
I wrote a SplitApp with a master and six detail views. Each detail view has it's own data model. The data is loaded in the onInit method of each controller.
I'm just trying to improve the performance of the application. Is there a way to load only the initial detail view and it's data on startup and the other only on request?
Thanks for the advise! The problem was that i defined all detail views in the XML-View inside the tag, like this:
<SplitApp mode="ShowHideMode" height="auto" >
<masterPages>
<mvc:XMLView viewName="de.test.view.Master" />
</masterPages>
<detailPages>
<mvc:XMLView viewName="de.test.view.Detail01" />
<mvc:XMLView viewName="de.test.view.Detail02" />
<mvc:XMLView viewName="de.test.view.Detail03" />
...
</detailPages>
</SplitApp>
Now i load each detail-view when it is requested for the first time and make use of the addDetailPage function of the SplitApp control.
Have you tried to add ``async="true"` property to your XMLView?
There are also some articles how you can improve performance of your app:
https://blogs.sap.com/2016/10/29/sapui5-application-startup-performance-best-practices/
https://blogs.sap.com/2016/11/19/sapui5-application-startup-performance-advanced-topics/
https://blogs.sap.com/2013/12/21/asynchronous-load-of-sapui5/
I am trying to build an app which has several views. The first view shows a list and a "create" button. Upon clicking the create button, a second view is shown.
I want to be able to embed a sub-view into this second view.
<mvc:View
controllerName="openui5.view.Framework"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<Page id="detailPage"
showNavButton="true"
navButtonPress=".onBack">
<Button id="saveButton"
text="Save"
type="Accept"
icon="sap-icon://save"
press=".onSave" />
<Button id="nextButton"
text="Next"
type="Accept"
icon="sap-icon://action"
press=".onNext" />
<mvc:XMLView viewName="openui5.view.BasicInformation" async="true" />
</Page>
</mvc:View>
The embedded view:
<mvc:View
controllerName="openui5.view.BasicInformation"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page id="page1">
<Button id="stuffButton"
text="Stuff"
type="Accept"
icon="sap-icon://save"
press=".onSave" />
</Page>
</mvc:View>
I can see the title of the sub-view but no button.
Am I not doing something "special" when trying to embed this sub-view?
we used also fragments for subviews and it worked fine, but i found it a bit cumbersume to put it in a jsfiddle..still it tried, see below. You should not need to have the view tag around your fragment. Your fragment should have the name xx.fragment.xml in your project and does not need a controller.
then you should be able to include it directly as as xml in your xml view
see also https://openui5.hana.ondemand.com/#docs/guide/2c677b574ea2486a8d5f5414d15e21c5.html
As said before, you could use Fragments which are good for "small portions" of content.
Other solution would be including a Shell component with an inner page to your View and then using routing mechanism so content of your "sub-view" would be loaded into this shell page:
On the main View:
<Shell id="shellContainer" appWidthLimited="false">
<App id="appContainer" backgroundOpacity="0"></App>
</Shell>
On manifest.json:
"targets": {...
"YourSubViewDestination": {
"viewType": "XML",
"viewName": "YourSubViewName",
"controlAggregation": "pages",
"controlId": "appContainer",
"parent": "YourMainViewDestination"
}
...}
On your create button action:
this.getOwnerComponent().getRouter().navTo("YourSubViewDestination", {});
You may need some help with routing: Routing navigation