I already create view : header, content, and footer but footer and content not display and not getting an error. the directory in form1.view.xml is correct because no error when I load the form1 view. when I command the header code and I refresh, the content show and footer still not show. when I command the header and content, the footer show. how to fix this problem?
Form1.view.xml
<App id="navCon"
class="footer-height footer-color header-color background-home background-color
footer-size-color panel-header">
<!-- Header -->
<mvc:XMLView viewName="sap.ui.taspen.taspen.Header" />
<App>
<pages>
<Page>
<Panel id="panelModule" headerText="Header form" class="panelForm">
<content>
<Label text="Ini form 1" />
</content>
</Panel>
</Page>
</pages>
</App>
<!-- Footer -->
<mvc:XMLView viewName="sap.ui.taspen.taspen.Footer" />
</App>
Header:
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" xmlns:t="sap.ui.table" xmlns:l="sap.ui.layout" xmlns:tnt="sap.tnt"
controllerName="sap.ui.taspen.taspen.Header" xmlns:html="http://www.w3.org/1999/xhtml">
<App>
<pages>
<Page showHeader="false">
<tnt:ToolHeader>
<html:img src="icon/logo_taspen.png" class="header-logo-taspen" />
<html:p class="text-header">NEW APPLICATION CORE BUSINESS</html:p>
<ToolbarSpacer width="20px" />
<tnt:ToolHeaderUtilitySeparator />
<ToolbarSpacer>
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow"
minWidth="20px" />
</layoutData>
</ToolbarSpacer>
<Text text="Selasa, 21/4/2017 / 11:07 AM" class="text-white" />
<Text text="Hello, Jhon Doe" class="text-white">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" />
</layoutData>
</Text>
<Button icon="sap-icon://log" type="Reject" press="logoutPress"
class="button-logout button-logout-icon margin-logout">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" />
</layoutData>
</Button>
</tnt:ToolHeader>
</Page>
</pages>
</App>
</mvc:View>
Footer:
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" xmlns:t="sap.ui.table" xmlns:l="sap.ui.layout" xmlns:tnt="sap.tnt"
controllerName="sap.ui.taspen.taspen.Footer" xmlns:html="http://www.w3.org/1999/xhtml">
<App>
<Page showHeader="false">
<footer>
<OverflowToolbar id="otbFooter">
<Button type="Transparent" text="Kebijakan dan Privasi"
press="kebdanprivPress" />
<Button type="Transparent" text="Bantuan" press="bantuanPress" />
<ToolbarSpacer />
<Label text="All Rights Reserved PT. Taspen Persero" />
<html:img src="icon/copyright-symbol.png" class="footer-logo-copyright" />
<Label text="2018" />
</OverflowToolbar>
</footer>
</Page>
</App>
</mvc:View>
To Display custome header instead of page header you have to use
<customHeader></customHeader>
tag.and remaining you have to place in <content></content>tag. can see you are missing content tag.
Related
I have this issue where I want to have the scrollbar active only for the content of my IconTabBar, while keeping the header fixed. I read here in stackoverflow that I should put all the content inside a ScrollContainer, and then set the stretchContentHeight="true".
But this option kills my header.
this is my code
<mvc:View
controllerName="Quickstart.App"
displayBlock="true"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:tnt="sap.tnt"
height="100%">
<App id="app">
<Page id="intro" showHeader="false" enableScrolling="false">
<tnt:ToolHeader height="10rem">
<Image src="./images/image.png"/>
<Text text="title" wrapping="false" />
<ToolbarSpacer />
<Button text="Feedback" icon="sap-icon://feedback" type="Transparent" press="onPressFeedback"/>
</tnt:ToolHeader>
<IconTabBar
id="idIconTabBarNoIcons"
items="{/Sheet1}"
class="sapUiResponsiveContentPadding"
expandable="false"
backgroundDesign="Transparent"
applyContentPadding="false"
stretchContentHeight="true">
<items>
<IconTabFilter text="{category_title}" key="info">
<Toolbar class="toolbar_boarder" design="Transparent">
<ToolbarSpacer/>
<Button text="Sort" tooltip="Order Alphabetically" id="IdSortButton" width="70px" press="onPressSort" icon="sap-icon://alphabetical-order" type="Ghost"/>
<Button id="IdExpandButton" tooltip="Additional Information" text="Collapse" class="sapUiTinyMarginEnd" width="101px" press="onPressExpand" icon="sap-icon://collapse-all" type="Ghost"/>
</Toolbar>
<ScrollContainer id="Scroll" class="sapUIBody" height="100%" width="100%" horizontal="false" vertical="true">
<l:Grid containerQuery="true" content="{path:'tools', templateShareable:false}" id="gridId">
<Panel class="iconFilters" fieldGroupIds="idPanel" >
<HBox>
<!-- <core:Icon press="onPressToolIcon"
src="{tool_icon_url}" size="2rem" color="Default" class="" /> -->
<Image src="{tool_icon_url}" width="2.2rem" press="onPressToolImage"></Image>
<Link text="{tool_title}" wrapping="true" target="_blank" href="{tool_redirect_url}" class="sapUiTinyMargin title_header"/>
</HBox>
<!-- Control the size of the line before badges -->
<Toolbar height="6px" width="75%"></Toolbar>
<HBox items="{path:'badges', templateShareable:false}" height="1rem" justifyContent="End" class="drawline">
<core:Icon size="1rem" src="{badge_css_url}" tooltip="{badge_hover_text}" class="badgePadding" />
</HBox>
<VBox height="11rem">
<Label text="Use Cases" class="sapUiTinyTop" design="Bold"/>
<List
items="{path:'usecases', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle" />
<FormattedText htmlText="{item}" />
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox height="11rem">
<Label text="Strengths" class="sapUiSmallTop" design="Bold"/>
<List
items="{path:'strengths', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle" />
<Text
wrapping="true" text="{item}"/>
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox height="5rem" fieldGroupIds="hideShowElements" visible="true">
<Label text="Best Practices" class="sapUiSmallTop" design="Bold" fieldGroupIds="hideShowElements"/>
<List
items="{path:'best_practices', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle2" />
<Link wrapping="true"
text="{best_practices_name}"
target="_blank"
href="{best_practices_url}" />
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox class="" height="5rem" visible="true" fieldGroupIds="hideShowElements">
<Label text="Content Responsibility" class="sapUiSmallTop" fieldGroupIds="hideShowElements" design="Bold" visible="true"/>
<List
items="{path:'content_responsibility', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle" />
<Text
wrapping="true" text="{item}"/>
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox class=" conf_move_down" height="3.5rem" visible="true" fieldGroupIds="hideShowElements">
<Label text="Confidentiality Level" design="Bold" fieldGroupIds="hideShowElements"/>
<HBox class="listItems">
<Text text="• " class="items_circle2" />
<Link wrapping="true"
text="{confidentiality_level}"
target="_blank"
href="{confidentiality_level_url}" />
</HBox>
</VBox>
<VBox class=" expandClassTrue" height="6rem" visible="true" fieldGroupIds="hideShowElements">
<Label text="Support" design="Bold" fieldGroupIds="hideShowElements"/>
<List fieldGroupIds="hideShowElements"
items="{path:'support', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem class="listItems">
<HBox class="listItems">
<Text text="• " class="items_circle2" />
<Link wrapping="true"
text="{support_name}"
target="_blank"
href="{support_url}" />
</HBox>
</CustomListItem>
</List>
</VBox>
</Panel>
</l:Grid>
</ScrollContainer>
</IconTabFilter>
</items>
</IconTabBar>
</Page>
</App>
</mvc:View>
When I use "False" for stretchcontentheight, this is the top of my page:
When I use "true", the header is gone.
Does anyone know how to solve this?
Thank you very much for reading and helping
I fixed my problem with a workaround using custom headers.
I am trying to get three panels to show on my object page but for some reason it shows only the last panel like it is shown on the screenshot:
The Object.view.xml looks like the following:
<mvc:View controllerName="ns.mngportfolios.controller.Object" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.f.semantic" xmlns:form="sap.ui.layout.form">
<semantic:SemanticPage id="page" headerPinnable="false" toggleHeaderOnTitleClick="false" busy="{objectView>/busy}" busyIndicatorDelay="{objectView>/delay}">
<semantic:titleHeading>
<Title text="{PORTFOLIO_NUMBER}" level="H2" responsive="true" />
</semantic:titleHeading>
<semantic:headerContent>
<ObjectNumber number="{
path: 'EBITDA',
formatter: '.formatter.numberUnit'
}" />
<ObjectAttribute text="{COMPANY_NAME}" />
</semantic:headerContent>
<Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>portfolioTitle}" expandable="{device>/system/phone}" expanded="true">
<content>
<form:SimpleForm id="objectForm">
<form:content>
<Label text="{i18n>portfolioSharesLabel}" />
<Text text="{PORTFOLIO_SHARES}" />
<Label text="{i18n>portfolioNameLabel}" />
<Text text="{PORTFOLIO_NAME}" />
<Label text="{i18n>portfolioDepreciationLabel}" />
<Text text="{= ${DEPRECIATION} + ' ' + 'EUR'}" />
</form:content>
</form:SimpleForm>
</content>
</Panel>
<Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>yearTitle}" expandable="{device>/system/phone}" expanded="false">
<content>
<List id="companyList">
<items>
<StandardListItem icon="sap-icon://building" title="Building1" />
<StandardListItem icon="sap-icon://email" title="abcd#mail.com" />
<StandardListItem icon="sap-icon://world" title="google.com" />
<StandardListItem icon="sap-icon://phone" title="+00123456789" />
<StandardListItem icon="sap-icon://map" title="23 Wall st, 10005 NY" />
</items>
</List>
</content>
</Panel>
<Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>mapTitle}">
<Image src="{
parts: [
'23 Wall St',
'10005',
'New York',
'United States'
],
formatter: '.formatter.formatMapUrl'
}" />
</Panel>
<semantic:sendEmailAction>
<semantic:SendEmailAction id="shareEmail" press=".onShareEmailPress" />
</semantic:sendEmailAction>
</semantic:SemanticPage>
</mvc:View>
Can someone help me to identify the missing piece here?
"content" aggregation of sap.f.semantic.SemanticPage has a Cardinality of 0..1. This means we can add a maximum of one child control. To accomplish the task of displaying 3 panels, try embedding all three panels inside a container. A few examples of containers which could be used can be found in samples page under the category containers and layouts.
To provide an example :-
<mvc:View controllerName="ns.mngportfolios.controller.Object" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.f.semantic" xmlns:form="sap.ui.layout.form">
<semantic:SemanticPage id="page" headerPinnable="false" toggleHeaderOnTitleClick="false" busy="{objectView>/busy}" busyIndicatorDelay="{objectView>/delay}">
<semantic:titleHeading>
<Title text="{PORTFOLIO_NUMBER}" level="H2" responsive="true" />
</semantic:titleHeading>
<semantic:headerContent>
<ObjectNumber number="{
path: 'EBITDA',
formatter: '.formatter.numberUnit'
}" />
<ObjectAttribute text="{COMPANY_NAME}" />
</semantic:headerContent>
<VBox>
<items>
<Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>portfolioTitle}" expandable="{device>/system/phone}" expanded="true">
<content>
<form:SimpleForm id="objectForm">
<form:content>
<Label text="{i18n>portfolioSharesLabel}" />
<Text text="{PORTFOLIO_SHARES}" />
<Label text="{i18n>portfolioNameLabel}" />
<Text text="{PORTFOLIO_NAME}" />
<Label text="{i18n>portfolioDepreciationLabel}" />
<Text text="{= ${DEPRECIATION} + ' ' + 'EUR'}" />
</form:content>
</form:SimpleForm>
</content>
</Panel>
<Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>yearTitle}" expandable="{device>/system/phone}" expanded="false">
<content>
<List id="companyList">
<items>
<StandardListItem icon="sap-icon://building" title="Building1" />
<StandardListItem icon="sap-icon://email" title="abcd#mail.com" />
<StandardListItem icon="sap-icon://world" title="google.com" />
<StandardListItem icon="sap-icon://phone" title="+00123456789" />
<StandardListItem icon="sap-icon://map" title="23 Wall st, 10005 NY" />
</items>
</List>
</content>
</Panel>
<Panel class="sapUiResponsiveMargin" width="auto" headerText="{i18n>mapTitle}">
<Image src="{
parts: [
'23 Wall St',
'10005',
'New York',
'United States'
],
formatter: '.formatter.formatMapUrl'
}" />
</Panel>
</items>
</VBox>
<semantic:sendEmailAction>
<semantic:SendEmailAction id="shareEmail" press=".onShareEmailPress" />
</semantic:sendEmailAction>
</semantic:SemanticPage>
</mvc:View>
Please choose the container control that best suits your layout demands.This is just an example.
I'm trying to add a footer to a page, and I'm running into some problems:
Uncaught TypeError: b.applyTagAndContextClassFor is not a function
This is how my view looks like.
App.view.xml
<mvc:View
controllerName="com.xyz.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
>
<App class="myCustomStyle">
<Page title="{i18n>pageTitle}">
<mvc:XMLView viewName="com.xyz.view.FirstPanel"/>
<footer>
<mvc:XMLView viewName="com.xyz.view.Footer"/>
</footer>
</Page>
</App>
</mvc:View>
Footer.view.xml
<mvc:View
controllerName="com.xyz.controller.Footer"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
>
<Toolbar>
<ToolbarSpacer/>
<Button type="Accept" text="Accept"/>
<Button type="Reject" text="Reject"/>
</Toolbar>
</mvc:View>
If I edit App.view.xml to look like this:
<!-- ... -->
<mvc:XMLView viewName="com.xyz.view.FirstPanel"/>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button type="Accept" text="Accept"/>
<Button type="Reject" text="Reject"/>
</Toolbar>
</footer>
<!-- ... -->
Everything works as intended?
Changing from XMLView to a Fragment like #I.B.N. suggested ended up fixing the problem.
#Marc explains, "The outermost element of the Footer view was a sap.ui.core.mvc.View. The aggregation footer only allows sap.m.IBar. Changing to a fragment fixed the error."
Corrections:
App.view.xml
<!-- ... -->
<footer>
<core:Fragment fragmentName="com.xyz.view.Footer" type="XML"/>
</footer>
<!-- ... -->
Footer.fragment.xml
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core"
>
<Toolbar>
<ToolbarSpacer/>
<Button type="Accept" text="Accept"/>
<Button type="Reject" text="Reject"/>
</Toolbar>
</core:FragmentDefinition>
I am trying to render StandardTile in a Grid, but due to some reason it's not working. however, it works when I remove the Grid & Panel from my code.
Can anyone point out what exactly am I doing wrong here?
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns="sap.m"
controllerName="hanaDashBoard.controller.Home">
<Page showHeader="false" enableScrolling="false">
<Toolbar class="sapUiTinyMarginTop" id="toolbar1" height="10%">
<ComboBox id="SidCombo" width="11.5%" showSecondaryValues="true"
items="{
path: '/results'
}" selectionChange="SidSelect">
<core:ListItem key='{Key}' text='{Sid}'
additionalText='{Template}' />
</ComboBox>
<Text id="TemplateText"></Text>
<Text id="SltText"></Text>
<ToolbarSpacer />
<Button id="UserName" icon="sap-icon://kpi-managing-my-area"
enabled="false" type="Transparent" />
</Toolbar>
<l:Grid
id="leGrid"
class="sapUiSmallMarginTop"
hSpacing="2"
visible="false"
>
<l:content>
<Panel width="auto" class="sapUiResponsiveMargin">
<content>
<TileContainer id="container"
width="100%" height="100%" visible="true" tileDelete="handleTileDelete"
tiles="{/TileCollection}">
<StandardTile icon="{icon}" type="{type}" number="{number}"
numberUnit="{numberUnit}" title="{title}" info="{info}"
infoState="{infoState}" press="handleTilepress" />
</TileContainer>
</content>
<layoutData>
<l:GridData span="L12 M12 S12" />
</layoutData>
</Panel>
</l:content>
</l:Grid>
<footer>
<Toolbar>
<ToolbarSpacer />
<Button id="editbutton" text="Edit" press="tilePressed" />
<ToolbarSpacer />
</Toolbar>
</footer>
</Page>
</mvc:View>
I am trying to fill select items from odata service. I used the odata service in a list just to test it and it works, no problems. But when i set the data to Select i get "invalid XML" error.
Here is my xml view :
<mvc:View controllerName="packdialogue.controller.s1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m"
xmlns:l="sap.ui.layout">
<App id="s1">
<pages>
<Page title="{i18n>title}" id="s1page" >
<content>
<FlexBox
alignContent="Center"
justifyContent="Center"
width="auto"
>
<Panel
class="s1Panel"
backgroundDesign="Solid" >
<l:VerticalLayout>
<Text
textAlign="Center"
id="S1LgnumLabel"
visible="true"
text="{i18n>S1LgnumLabel}"
width="18em">
</Text>
<Input
class="s1Input"
id="S1LgnumInput"
enabled="true"
width="18em">
</Input>
<Button
id="S1EnterButton"
text="{i18n>S1Button1Text}"
width="21.5em"
press="onEnterPressed"
>
</Button>
<Text
textAlign="Center"
id="S1WSLabel"
visible="false"
text="{i18n>S1WSLabel}"
width="18em">
</Text>
<Button
id="S1NextButton"
press="onS1ButtonPressed"
text="{i18n>S1Button2Text}"
width="21.5em"
enabled="false"
visible="false"
>
</Button>
<Select
items="{test>/WorkcenterSet}">
<items>
<core:Item key="{test>wrkst}" text="{test>wrkst}" />
</items>
</Select>
<List
id="S1List"
visible="false"
items="{test>/WorkcenterSet}"
>
<StandardListItem
title="{test>wrkst}"
iconDensityAware="false"
iconInset="false" />
</List>
</l:VerticalLayout>
</Panel>
</FlexBox>
</content>
</Page>
</pages>
</App>
When i delete the Select from my View I get no errors so the problem is in the select, but I can't figure out what is wrong with my code.
You forgot to add core namespace into the view header:
xmlns:core="sap.ui.core"
So, when it comes to it does not know what to do.
I believe you should define core namespace in the XML for <core:Item key="{test>wrkst}" text="{test>wrkst}" />
<mvc:View controllerName="packdialogue.controller.s1"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:l="sap.ui.layout">