I am a beginner in sapui5. I'm working on a sapui5 project with splitApp architecture.
I am wondering why the Master view works correctly on a desktop machine, but is empty on a mobile device.
Master.view.xml:
<mvc:View controllerName="query.sap.controller.Master" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m"
xmlns:u="sap.ui.unified" xmlns:semantic="sap.m.semantic">
<SplitContainer>
<masterPages>
<semantic:MasterPage title="Query List">
<semantic:content>
<!-- For client side filtering add this to the items attribute: parameters: {operationMode: 'Client'}}" -->
<List id="table" width="auto" class="sapUiResponsiveMargin"
items="{ path: '/QueriesSet', sorter : { path : 'Cubename', group : true }
}"
growingScrollToLoad="true">
<headerToolbar>
<Toolbar>
<SearchField width="80%" search="onSearchQuery"/>
<Button icon="sap-icon://refresh" press="onRefresh"/>
</Toolbar>
</headerToolbar>
<items>
<ObjectListItem press="onListItempress" type="Active" title=" {Queryname}" intro="Query name : ">
<firstStatus>
<ObjectStatus text="{GenerationTime}"/>
</firstStatus>
<secondStatus>
<ObjectStatus state="Warning" title="Created By " text="{CreatedBy}"/>
</secondStatus>
</ObjectListItem>
</items>
</List>
</semantic:content>
</semantic:MasterPage>
</masterPages>
</SplitContainer>
On desktop:
On mobile:
Related
I have an XML fragment and use it in several places in an XML view like this:
<IconTabFilter text="ABC" key="1" icon="sap-icon://alphabetical-order">
<content>
<Table id="table1" width="auto" items="{path:'/ContactSet',parameters:{expand:'BusinessAddress,HomeAddress,OtherAddress,Photo'},filters:[{path:'Surname',operator:'StartsWith',value1:'A'},{path:'Surname',operator:'StartsWith',value1:'B'},{path:'Surname',operator:'StartsWith',value1:'C'}]}" noDataText=" {worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesHeader" type="XML"/>
</headerToolbar>
<columns>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesColumns" type="XML"/>
</columns>
<items>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesRows" type="XML"/>
</items>
</Table>
</content>
</IconTabFilter>
<IconTabSeparator icon="sap-icon://process"/>
<IconTabFilter text="DEF" key="2" icon="sap-icon://alphabetical-order">
<content>
<Table id="table2" width="auto" items="{path:'/ContactSet',parameters:{expand:'BusinessAddress,HomeAddress,OtherAddress,Photo'},filters:[{path:'Surname',operator:'StartsWith',value1:'D'},{path:'Surname',operator:'StartsWith',value1:'E'},{path:'Surname',operator:'StartsWith',value1:'F'}]}" noDataText="{worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesHeader" type="XML"/>
</headerToolbar>
<columns>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesColumns" type="XML"/>
</columns>
<items>
<core:Fragment fragmentName="de.cimt.cimply.AddressBook.view.worklist.tablesRows" type="XML"/>
</items>
</Table>
</content>
</IconTabFilter>
I have some bindings in tablesHeader fragment file:
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Toolbar>
<Title text="{worklistView>/worklistTableTitle}"/>
<ToolbarSpacer/>
<SearchField tooltip="{i18n>worklistSearchTooltip}" search="onSearch" width="auto"/>
</Toolbar>
</core:FragmentDefinition>
Now the question is how can I customize the binding inside the fragment based on its parent element.
For example I would like to have <Title text="{worklistView>/worklistTable1Title}"/> when it is placed inside the IconTabFilter with key="1" and also <Title text="{worklistView>/worklistTable2Title}"/> when it placed inside the IconTabFilter with key="2".
One possibility is to pass this binding to the fragment when we place it in the destination. But I don't know do we have any option for that in SAPUI5 or not.
The other possibility is to use some kinds of templating like what explained here. However, again I don't know how to make the conditions based on the parent element.
Note: I don't want to enter the codes inside the fragment file directly in the destination file, as I want to prevent repeating the code.
You need to play with the worklistView JSON model. As you mentioned it is a JSON model there will be a common property which is bind to the header text control irrespective of the selected key.
On load IconTabBar will set the default key using selectedKey property. So we can set this key value as the default value for the header text in the header section.
view.xml
<IconTabBar
id="idIconTabBar"
select="handleIconTabBarSelect"
selectedKey="1"
class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter text="ABC" key="1" icon="sap-icon://alphabetical-order">
<content>
<Table id="table1" width="auto" noDataText=" {worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="path/tablesHeader" type="XML"/>
</headerToolbar>
<!-- columns-->
<!-- items -->
</Table>
</content>
</IconTabFilter>
<IconTabSeparator icon="sap-icon://process"/>
<IconTabFilter text="DEF" key="2" icon="sap-icon://alphabetical-order">
<content>
<Table id="table2" width="auto" noDataText="{worklistView>/tableNoDataText}" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" updateFinished="onUpdateFinished">
<headerToolbar>
<core:Fragment fragmentName="path/tablesHeader" type="XML"/>
</headerToolbar>
<!-- columns-->
<!-- items -->
</Table>
</content>
</IconTabFilter>
</items>
</IconTabBar>
Header fragment
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Toolbar>
<Title text="{worklistView>/worklistTableHdrTitle}"/>
<ToolbarSpacer/>
<SearchField tooltip="{i18n>worklistSearchTooltip}" search="onSearch" width="auto"/>
</Toolbar>
</core:FragmentDefinition>
controller.js
worklistView model will be set with an extra property worklistTableHdrTitle with the default value as per the key which is mentioned in the IconTabBar.
setworklistViewModel: function() {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
"worklistTableHdrTitle": "Table1 Title",//default value, as selectedKey="1" in IconTabBar
"worklistTable1Title": "Table1 Title",
"worklistTable2Title": "Table2 Title",
"tableNoDataText": "No Data"
});
this.getView().setModel(oModel, "worklistView");
},
Manipulate the worklistView model data based on the selection.
handleIconTabBarSelect: function(oEvent) {
var sSelectedKey = oEvent.getParameters("selectedKey").key;
if (sSelectedKey) {
var oModel = this.getView().getModel("worklistView");
if (oModel)
oModel.setProperty("/worklistTableHdrTitle", (sSelectedKey === "1") ? oModel.getProperty("/worklistTable1Title") : oModel.getProperty("/worklistTable2Title"));
}
},
I have a view:
<List
items="{data>/Stages}">
<CustomListItem>
<Panel>
<headerToolbar>
<Toolbar>
<content>
<Button
visible="{= ${data>/Stages/length} > 1}" />
</content>
</Toolbar>
</headerToolbar>
<content>
<Table
growing="true"
growingScrollToLoad="false"
items="{
path: 'data>FieldWorks',
templateShareable: true
}"
class="blueTable originTable techTable">
<columns>
<Column
visible="true"
vAlign="Middle"
width="15px" />
</columns>
<items>
<ColumnListItem>
<cells>
<core:Icon
visible="{ ???}"
src="sap-icon://customfont/moving"
size="2.1rem"
color="#14c6c9" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Panel>
</CustomListItem>
</List>
I have a model (example):
data: {
Stages: [{
FieldWorks: [{}, ....]
}, .....]
}
I hide my button (in my toolBar) by expression binding as you can see.
What is the best way to hide my Icon (in CustomListItem) by condition FieldWorks.length > 1
If you are using a JSON Model just add boolean property to your JSONModel to the FieldWorks entity and bind the visible property to it. Then one time you have to set it when data is loaded or created and that's it.
You can define a new property in your json Model under the FieldWorks property in order to bind the visibility of the icon.
you can use Object.defineProperty (SPEC MDN) to define your calculated new property.
When I try to add ObjectPageSection inside <sections> of an ObjectPageLayout, I see the title coming in capital letters.
Could anyone explain why? I would like to show it as title-cased.
Here is the snippet of the code:
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.uxap"
xmlns:layout="sap.ui.layout"
xmlns:m="sap.m"
xmlns:blockcolor="sap.uxap.sample.SharedBlocks"
controllerName="personal.controller.Object"
height="100%"
>
<ObjectPageLayout id="ObjectPageLayout"
enableLazyLoading="false"
showAnchorBarPopover="false"
showFooter="true"
>
<headerTitle>
<ObjectPageHeader objectTitle="{DataAgingGroupName}"/>
</headerTitle>
<sections>
<ObjectPageSection title="Section 2">
<subSections>
<ObjectPageSubSection title="Deletable Data Subjects">
<blocks>
<Table xmlns="sap.m" id="table"
mode="SingleSelectLeft"
width="auto"
items="{invoice>/Invoices}"
noDataText="{worklistView>/tableNoDataText}"
busyIndicatorDelay="{worklistView>/tableBusyDelay}"
growing="true"
growingScrollToLoad="true"
updateFinished="onUpdateFinished"
>
<columns>
<Column id="nameColumn1">
<Text text="Data Subject"/>
</Column>
</columns>
<items>
<ColumnListItem
type="Navigation"
press="onPress"
>
<cells>
<Text id="__picker0"
text="{invoice>ProductName}"
width="100%"
/>
</cells>
</ColumnListItem>
</items>
</Table>
</blocks>
</ObjectPageSubSection>
</subSections>
</ObjectPageSection>
<ObjectPageSection title="Section 1">
<subSections>
<ObjectPageSubSection title="General Information"/>
</subSections>
</ObjectPageSection>
</sections>
<footer>
<m:OverflowToolbar>
<m:ToolbarSpacer/>
<m:Button
text="Delete"
type="Reject"
press="handleDelete"
/>
</m:OverflowToolbar>
</footer>
</ObjectPageLayout>
</mvc:View>
You can, and you should if you're following the Fiori Guidelines, disable the uppercase via upperCaseAnchorBar since the default value is true there. The same goes for the <ObjectPageSection> which has the property titleUppercase enabled by default. So, disable them explicitly:
<ObjectPageLayout upperCaseAnchorBar="false" ...>
<sections>
<ObjectPageSection titleUppercase="false" ...>
The <ObjectPageSubSection>, on the other hand, provides the property titleUppercase too, but its default value is already false there.
It comes from the css
.sapUxAPObjectPageSectionTitleUppercase {
text-transform: uppercase;
}
:)
Why is It not possible to add a SplitApp Container as an aggregation for ICONTab Bar. I have tried to add the splitApp under ICONTAB Bar and it is working. But it is not working with SplitApp Container.
<mvc:View controllerName="com.sap.controller.Main"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<IconTabBar id="idIconTabBar" select="handleIconTabBarSelect"
class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter>
<content></content>
</IconTabFilter>
<IconTabFilter>
<content>
<SplitApp id="SplitContDemo1" initialDetail="detail" initialMaster="master">
<detailPages>
<Page id="detail" title="Detail 1" class="sapUiStdPage">
<content>
<Label text="Detail page 1"/>
<Button text="Go to Detail page2" press="onPressNavToDetail"/>
</content>
</Page>
</detailPages>
<masterPages>
<Page id="master" title="Master 1" icon="sap-icon://action"
class="sapUiStdPage">
<content>
<List>
<items>
<StandardListItem title="To Master2" type="Navigation"
press="onPressGoToMaster"/>
</items>
</List>
</content>
</Page>
</masterPages>
</SplitApp>
</content>
</IconTabFilter>
</items>
</IconTabBar>
<SplitContainer id="SplitContDemo">
<detailPages>
<Button text="Detailed Button"/>
</detailPages>
<masterPages>
<Button text="Master Button"/>
</masterPages>
</SplitContainer>
</content>
</Page>
</pages>
</App>
</mvc:View>
Regards,
MS
It is not very clear what your problem is exactly. You can put anything inside the content aggregation of an IconTabFilter. In the items aggregation of an IconTabBar you can only put IconTabFilters and IconTabSeparators.
I have checked your example and made it to work by putting the Split Container inside an IconTabFilter: https://jsfiddle.net/enykp4h8/1/.
<IconTabFilter text="Split Container">
<SplitContainer id="SplitContDemo">
<detailPages>
<Button text="Detailed Button" />
</detailPages>
<masterPages>
<Button text="Master Button" />
</masterPages>
</SplitContainer>
</IconTabFilter>
Later update:
If you put the SplitContainer alone in the IconTabBar, it will seem as though it does not work because the tab's content has 0 height. This is because the SplitContainer has a height 100% of its parent element whilst the tab's height is determined based on the height of its children (so they are somehow codependent).
To go around this you can either use some custom CSS to give the container a fixed height or you can ask the IconTabBar to stretch to its parent's height (using stretchContentHeight):
CSS Solution:
.fixContHeight.sapMSplitContainer {
height: 300px
}
<SplitContainer id="SplitContDemo" class="fixContHeight" >
<!-- the pages... -->
</SplitContainer>
Stretch Content Solution:
<IconTabBar id="idIconTabBar" select="handleIconTabBarSelect"
class="sapUiResponsiveContentPadding" stretchContentHeight="true">
<items>
<IconTabFilter text="Split Container">
<SplitContainer id="SplitContDemo">
<detailPages>
<Button text="Detailed Button" />
</detailPages>
<masterPages>
<Button text="Master Button" />
</masterPages>
</SplitContainer>
</IconTabFilter>
<items>
</IconTabBar>
i want to have an ItemList, where a Button appears, when the user swipes the element.
I have this code in my view.xml:
<content>
<List id="searchResultList" class="sapUiResponsiveMargin" width="auto" items="{ path : 'assets>/Assets' }">
<items>
<ObjectListItem title="{assets>AssetId}">
<swipeContent>
<Button text="Delete Item" type="Reject"/>
</swipeContent>
</ObjectListItem>
</items>
</List>
</content>
But i getting the error: Uncaught Error: failed to load 'sap/m/swipeContent.js'
What i am doing wrong?
Thank you!
Try this:
<List id="searchResultList" class="sapUiResponsiveMargin" width="auto" items="{ path : 'assets>/Assets' }">
<ObjectListItem title="{assets>AssetId}"/>
<swipeContent>
<Button text="Delete Item" type="Reject"/>
</swipeContent>
</List>
You have the swipeContent inside of the ObjectListItem control, therefore doesn't works.
JS Bin Demonstration