How to add Button to FeedListItem - sapui5

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>

Related

Two m.Slider controls, same properties, yet one doesn't show the marks

enableTickmarksis true for both slider controls, yet only one shows them?
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog title="{Title}" icon="sap-icon://create">
<beginButton>
<Button text="{i18n>cancel}" press="handleCloseCompetencySelection"/>
</beginButton>
<endButton>
<Button type="Accept" text="{i18n>submit}" press="handleSubmitCompetencySelection"/>
</endButton>
<content>
<FlexBox direction="Column" alignItems="Center" class="sapUiMediumMarginTopBottom">
<items>
<HBox><Label text="{i18n>required}: "/><Label id="RequiredProficiencyLabel" text="{ProfidrDescr}" design="Bold"/></HBox>
<Slider id="RequiredProficiencySlider" enabled="false" liveChange="onSliderChange" enableTickmarks="true" min="0" max="10"
class="sapUiSmallMarginBottom" width="400px"/>
</items>
</FlexBox>
<FlexBox direction="Column" alignItems="Center" class="sapUiMediumMarginTopBottom">
<items>
<HBox><Label text="{i18n>achieved}: "/><Label id="ProficiencyLabel" text="" design="Bold"/></HBox>
<Slider id="ProficiencySlider" liveChange="onSliderChange" enableTickmarks="true" min="0" max="10" class="sapUiSmallMarginBottom"
width="400px"/>
</items>
</FlexBox>
<MessageStrip text="{i18n>dragMessage}" type="Information" showIcon="true" class="sapUiMediumMargin"></MessageStrip>
</content>
</Dialog>
</core:FragmentDefinition>
There was a bug which is fixed as of version 1.52. The z-index of tickmarks was incorrectly set. Here you can see that the tickmarks are displayed correctly in Dialog: https://jsbin.com/ruqosej/edit?html,js,output
Funny story:
for "disabled" slider that tickmark looks bolder and perceptible than "enabled" one
the second slider shows the tickmarks, but you are not able to see them due to the very light grayscale color of the marks (to make sure that it is true, try to look at the sceen with different angle and you will see the tickmarks of the second slider; or use another display)

How to implement info bar about filter setting in sap.m.table?

In fiori guideline of View Setting and Responsive Table, there is a info bar shows the filter setting. How to implement it?
It looks like a sap.m.MessageStrip, but there are only five kinds of MessageType in MessageStrip(Error, Information...), seems no such color suits for this bar. Should I overwrite this color?
In this Demo, message strip is put above the Table, but in design, it seems to put between table title and column, how to implement it?
I've tried this:
<Table>
<headerToolbar>
<Toolbar>
<Title id="tableHeader" text="title"/>
<!--BUTTONS-->
<VBox>
<MessageStrip
text="Filtered By:"
type="Information"
showCloseButton="true"
showIcon="false">
</MessageStrip>
</VBox>
</Toolbar>
</headerToolbar>
</Table>
But it looks like this:
It is called infoToolbar, not infoBar...
<Table>
<infoToolbar>
<Toolbar
active="true"
press="handleInfobarPress" >
<Label text="Filtered By: " />
<ToolbarSpacer />
<core:Icon
tooltip="Reset filter"
src="sap-icon://sys-cancel"
class="size2"
color="white"
press="onResetFilters">
</core:Icon>
</Toolbar>
</infoToolbar>
<headerToolbar>
<Toolbar>
<Title id="tableHeader" text="title"/>
<!--BUTTONS-->
</Toolbar>
</headerToolbar>
</Table>
infoToolbar is implemented in sap.m.ListBase as Aggregations: https://openui5.hana.ondemand.com/#/api/sap.m.ListBase
Both sap.m.List and sap.m.Table borrowed these aggregations/methods from sap.m.ListBase.

ZK framework getting value of a component on zul page

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>

How to add views to the steps of a roadmap in sapui5

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

How to change grid default status in a ZK theme?

I have a page built with ZK. In this page there is a button that start a search. If there are some data them appear in a grid view.
Every data are built in this way:
v Date1 (dd/mm/yyyy)
- item
- item
- item
v Date2 (dd/mm/yyyy)
- item
- item
Lecter V means an arrow but I can't post an image so I use a "v" that have similar image to undestand.
It works correctely but there is a problem.
I would have this situation:
Date1 (dd/mm/yyyy)
Date2 (dd/mm/yyyy)
When I click on a date I want that the arrow became "v" and all data appear.
If in the first case I click on date it became close.
How to change the default view of grid items?
This is my code
<grid id="demoGrid" width="50%" height="400px" style ="float:left"
model="#bind(vm.value)" emptyMessage="No data">
<columns menupopup="auto">
<column sort="auto(Hour)" label="Hour" width="150px"/>
<column sort="auto(Value)" label="Value(bpm)" hflex="1" />
</columns>
<!-- template for group -->
<template name="model:group">
<group label="#load(each)" />
</template>
<!-- template for each element in model -->
<template name="model" >
<row>
<label value="#load(each.hour)" />
<label value="#load(each.value)" />
</row>
</template>
<!-- template for footer -->
<template name="model:groupfoot">
<groupfoot>
<cell colspan="5" style="text-align: right; padding-right: 15px">
<label value="#load(each)" style="font-weight:bold;" />
</cell>
</groupfoot>
</template>
</grid>
I try to use tag details in this subcode:
<template name="model">
<details open="false">
<row>
<label value="#load(each.hour)" />
<label value="#load(each.value)" />
</row>
</details>
</template>
Try the details like this :
<template name="model">
<row>
<detail open="false">
<hlayout>
<label value="#load(each.hour)" />
<label value="#load(each.value)" />
</hlayout>
</detail>
<label value="second column"/>
</row>
</template>
Explication :
Detail can have only 1 root element so that's why we set the the hlayout.
Of course you can change this to div or whatever you want.
The row tag has to be outside the detail tag.
The detail take a column so for this example you need to provide 2 columns.
Edit :
I created a fiddle.