I have created a tnt Sidebar and want to insert Checkboxes and Combobox in it.
This should be the result:
Currently it looks like this:
So the NavigationItems should be replaced by Checkboxes. f.E. sap.m.CheckBox
<content>
<tnt:ToolPage>
<tnt:sideContent>
<tnt:SideNavigation id="sideNavigation" selectedKey="subItem3">
<tnt:NavigationList>
<tnt:NavigationListItem text="Item 1" icon="sap-icon://employee">
<tnt:NavigationListItem text="Sub Item 1" >
</tnt:NavigationListItem>
<tnt:NavigationListItem text="Sub Item 2" />
<tnt:NavigationListItem text="Sub Item 3" id="subItem3" key="subItem3" />
<tnt:NavigationListItem text="Sub Item 4" />
</tnt:NavigationListItem>
<tnt:NavigationListItem text="Item 2" icon="sap-icon://building">
<tnt:NavigationListItem text="Sub Item 1" />
<tnt:NavigationListItem text="Sub Item 2" />
<tnt:NavigationListItem text="Sub Item 3" />
<tnt:NavigationListItem text="Sub Item 4" />
</tnt:NavigationListItem>
</tnt:NavigationList>
I tried to insert a sap.m.CheckBox instead of a normal NavigationListItem but then I get an error, that the "CheckBox" class is under the "items" aggregation and must match the "NavigationListItem" type.
I know Fiori/UI5 is limited somehow and you shouldn't mix up too much different namespaces, but is there some workaround?
Kind regards
Sebastian
I'm not sure what you are trying to do, but maybe creating a List or TreeList with a CustomListItem would help you more.
You can put it into a SplitApp and have a "Navigation like" Panel too, but fully customizable.
Related
Why does the XML tree on the picture looks like shown on the second picture? MessageStrip tries to get into the content area of IconTabBar even jumping over 4 elements and tiles get out by any means. There are no restrictions in documentation on what can placed in the IconTabBar or in the IconTabFilter. GenericTile is not a layout which is supposed to take the whole place on the screen. How to put tiles into the content of IconTabBar?
Here's the code of the view:
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
<IconTabBar id="idTopLevelIconTabBar" class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter id="start" icon="sap-icon://hint">
<GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout"
header="Sales Fulfillment Application Title"
subheader="Subtitle"
>
<TileContent unit="EUR" footer="Current Quarter">
<ImageContent src="sap-icon://home-share"/>
</TileContent>
</GenericTile>
<GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout"
header="Manage Activity Master Data Type"
subheader="Subtitle"
>
<TileContent />
</GenericTile>
<GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout"
header="Manage Activity Master Data Type With a Long Title Without an Icon"
subheader="Subtitle Launch Tile" mode="HeaderMode"
>
<TileContent unit="EUR" footer="Current Quarter" />
</GenericTile>
<GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout"
header="Jessica D. Prince Senior Consultant"
subheader="Department"
>
<TileContent/>
</GenericTile>
<MessageStrip
type="Information"
showIcon="true"
text="Another IconTabFilter"
/>
</IconTabFilter>
<IconTabFilter id="layouts" icon="sap-icon://bookmark">
<!-- ... -->
</IconTabFilter>
</items>
</IconTabBar>
</mvc:View>
The solution was to remove my custom CSS (e.g. tileLayout) and to add any margin class (e.g. "sapUiLargeMarginTop") to the Message Strip so that Generic Tile fits inside an IconTabFilter.
The result
I want to add two buttons to a FeedListItem similar to the NotificationnListItem.
<List headerText="Feed Entries" items="{ path : '/userFeedBack', mode : 'OneWay' }">
<FeedListItem sender="#{UserScreenname} ({UserName})"
icon="{ProfileImgUrl}" senderPress=".navToUser"
iconPress=".navToUser"
iconDensityAware="false" info="{Type}"
timestamp="{ path : 'Time', formatter : '.notificationListItemFormatted' }"
text="{TweetText} ({Total} times)">
</FeedListItem>
</List>
It should look like this. How can I these buttons or is there any other list control which I can use here?
For buttons, you will have to use different type of List Items. The FeedListItem does not support any aggregation. I would suggest the following options:
sap.m.NotificationListItem
sap.m.CustomListItem: Here, you will need to create a layout, where the image will come, where the text and the buttons will render.
Create a custom control by Extending FeedListItem and add 'buttons' aggregation to it.
Let me know if you need more inputs.
XML Code :
<List id="notificationList" class="sapContrast sapContrastPlus">
<NotificationListItem
description="Information of List Item 1"
showCloseButton="false"
datetime="1 hour"
unread="true"
press="onListItemPress"
authorName="Jean Doe"
authorPicture="sap-icon://globe">
<buttons>
<Button text="Accept" type="Accept" ></Button>
<Button text="Reject" type="Reject" class="sapUiLargeMarginEnd" ></Button>
<Button icon="sap-icon://thumb-up" class="sapUiLargeMarginBegin" ></Button>
</buttons>
</NotificationListItem>
<NotificationListItem
description="Information of List Item 2"
showCloseButton="false"
datetime="1 hour"
unread="true"
priority="None"
authorName="Jean Doe"
authorPicture="sap-icon://world">
<buttons>
<Button text="Accept" type="Accept" ></Button>
<Button text="Reject" type="Reject" class="sapUiLargeMarginEnd" ></Button>
<Button icon="sap-icon://thumb-down" class="sapUiLargeMarginBegin" ></Button>
</buttons>
</NotificationListItem>
</List>
I am trying to get the value of a textbox on a zul page by using some kind of getValue method. I should handle this on the zul page, not on a controller. I need to assign a listbox cell (which is the first cell of the list box below) with a value coming from the textbox.
<listcell>
<label value="" />
</listcell>
<listcell>
<toolbarbutton visible="true"
image="/resources/images/icons/1616/page_text.gif" />
</listcell>
<listcell>
<label value="#{file.name}" />
</listcell>
<listcell>
<toolbarbutton forward="onClick=onRemoveMultipleFiles"
visible="true" id="newFileAndCommentRemove" image="/resources/images/icons/1616/delete.png" />
</listcell>
</listitem>
If what you want is that after the textbox is filled then the first cell will fill with its value you can do it like this:
put an id into the label in the cell
put an onChange operation in the textbox so when the textbox change you can put its value into the cell
like this:
<textbox id="textbox" onChange="label.setValue(self.getValue())"/>
<listbox id="newFileAndComment">
<listhead>
<listheader label="1" width="30px" />
</listhead>
<listitem self="#{each=file}">
<listcell>
<label id="label"/>
</listcell>
</listitem>
I am looking to add views (or workflow) to a roadmap steps in sapui5. I am new to sapui5, can any one help me out with this?
My code:
<script>
//create the RoadMap control
var oRMap = new sap.ui.commons.RoadMap("rMap");
//create the RoadMap steps
var oStep1 = new sap.ui.commons.RoadMapStep("step1", {label: "Step 1"});
var oStep2 = new sap.ui.commons.RoadMapStep("step2", {label: "Step 2"});
var oStep3 = new sap.ui.commons.RoadMapStep("step3", {label: "Step 3"});
//add steps to the RoadMap
oRMap.addStep(oStep1);
oRMap.addStep(oStep2);
oRMap.addStep(oStep3);
//Set the first step as selected
oRMap.setSelectedStep("step1");
//Set the number of visible steps
oRMap.setNumberOfVisibleSteps(3);
//Place the control on the UI
oRMap.placeAt("sample1");
</script>
This will show three steps in my application. What I want is to add views to each of the steps.
Say I want to add a date picker for first step, table for second step and so on..
How can I do this?
You can achieve this in many ways. I would create a container below your roadmap, where you display different views, one for each step. You could use a NavContainer which handles the navigation
EDIT: it can be as simple as this (I used XMLView notation since I find these a far easier to write, but the same applies for JSViews of course):
<VBox>
<c:RoadMap id="roadMap">
<c:steps>
<c:RoadMapStep id="step1" label="Step 1" />
<c:RoadMapStep id="step2" label="Step 2" />
<c:RoadMapStep id="step3" label="Step 3" />
</c:steps>
</c:RoadMap>
<NavContainer width="100%" height="20rem">
<Page title="Step 1">
<DatePicker />
<Button icon="sap-icon://feeder-arrow" text="Next step" press="doNext" />
</Page>
<Page title="Step 2">
<Text text="Some data"/>
<Button icon="sap-icon://nav-back" text="Previous step" press="doPrevious" />
<Button icon="sap-icon://feeder-arrow" text="Next step" press="doNext" />
</Page>
<Page title="Step 3">
<Text text="Some more data"/>
<Button icon="sap-icon://nav-back" text="Previous step" press="doPrevious" />
<Button icon="sap-icon://feeder-arrow" text="Next step" press="doNext" />
</Page>
</NavContainer>
</VBox>
In the doNext and doPrevious you then increment/decrement the roadmap's selectedStep property with the correct step ID, and you perform a nav.to(target) or nav.back()
See https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.m.sample.NavContainer/preview for info in the NavContainer
i am unable to populate my Struts2 select drop down in my jsp page.
Note: My jsp page loads through json response.
I have a select box inside a form. But i don't t know how to populate it when my jsp page loads.
And in the same page i have a select dropdown in my Struts2 jquery grid,which i am able to populage but i don't know how to populate a drop down for my form which are out side of the grid.
Please help me regarding this issue.
my jsp page
<s:url id="selecturl" action="selectaction"/>
<s:url id="bookediturl" action="bookeditt"/>
<s:url id="bookremoteurl" action="booksetups"/>
<sjg:grid
id="bookgrid"
formIds="form2"
reloadTopics="reloadMyGrid"
caption="List of Cover Details"
dataType="json"
href="%{bookremoteurl}"
pager="true"
gridModel="gridModel"
rowList="50,100,5000"
rowNum="20"
filter="true"
filterOptions="{stringResult :false,searchOnEnter : false,enableClear : true,gridModel : true}"
rownumbers="true"
editurl="%{bookediturl}"
navigator="true"
editinline="true"
navigatorSearch="false"
autowidth="false"
width= "1550"
viewrecords="true"
navigatorRefresh="true"
navigatorDelete="true">
<sjg:gridColumn name="id" index="locationId" title="ID" formatter="integer" sortable="false" key="true"
search="false" editable="true" hidden="true" />
<sjg:gridColumn name="authLastname" index="authLastname" title="AuthorLastname" sortable="true" search="true" editrules="{required: true}"
editable="true" edittype="text" />
<sjg:gridColumn name="subjectId" title="Subject Name" editable="true" sortable="false" align="center" search="false" searchtype="select"
searchoptions="{dataUrl:'%{selecturl}'}" edittype="select" editoptions="{dataUrl:'%{selecturl}'}" />
</sjg:grid>
<div id="myDivBox" style="display:none; width :300px;position: relative;top: -30px;left: 299px;button:0px;">
<s:form action="searchkeywordss" id="form2" theme="simple" cssClass="yform">
<sj:textfield placeholder="Enter keyword to search" cssClass="txtbox" size="42" maxLength="255" name="keywordsearch"/>
<sj:select href="%{selecturl}" name="countryselect" list="%{lstsub}" listKey="id" listValue="subjectName" theme="jquery" cssStyle="margin-top:4px;"/>
<sj:a button="true" id="btnid" cssStyle="position: relative;top: 0px;left: 09px;" onClickTopics="reloadMyGrid">Find</sj:a>
</s:form>
</div>
struts.xml
<action name="booksetups" class="v.esoft.actions.bookdetails.BookdetailsAction" >
<result name="success" type="json"/>
<result name="login" type="redirect"> /index.jsp </result>
</action>
<action name="selectaction" class="v.esoft.actions.bookdetails.SelectAction">
<result name="success">/select.jsp</result>
</action>
You should only use the sj:select like below
<sj:select href="%{selecturl}" name="countryselect" list="subjectList" listKey="id" listValue="subjectName" theme="jquery" cssStyle="margin-top:4px;"/>
where selecturl returns a json response, subjectList is name of list in the json reponse which contains the options
Your selectaction should have a json response, but what you have now is an action returning a jsp so it would not work. If you cannot change it, you should create another action which returns json.