It's my first time working on zk and i have this guideline.
There is an empty column on the far right that fills the empty space between the last column and the right edge of the Grid. When the content is loaded the scroll should appear inside that column.
Is it possible to do this? do you have any suggestion?
Something like this fiddle if your run it under zk 7.0.2 or 7.0.3?
If link dies this is the code :
<zk>
<window border="normal" title="hello" >
<grid height="300px">
<columns>
<column label="Chat Message" sort="auto" />
<column label="By" sort="auto" />
</columns>
<rows id="rows">
<zk forEach="1,2,3,4,5,6,7,8,9,10">
<row>
<label value="Message ${each}"/>
<label value="By User ${each}"/>
</row>
</zk>
</rows>
</grid>
</window>
</zk>
Related
I have an application with a footer which is same for all pages. Until now, I used separate view for this which I attached to the bottoms of the pages. However, now I created two fragments for item details page (Display/Add modes), using the ObjectPageLayout and want to add my footer into both of those. As I understand, I should use fragment instead of View so I rewrote my footer view into fragment so it looks like this:
<core:FragmentDefinition xmlns="sap.m"
xmlns:f="sap.f"
xmlns:core="sap.ui.core"
>
<VBox>
<Text text=""/>
<Text text=""/>
<f:Card class="sapUiTinyMargin" height="100px" width="1144px">
<f:content>
<VBox width="100%" alignItems="Center">
<Text text=""/>
<HBox>
<Label text="{i18n>needHelp}" />
<ToolbarSpacer width="20px" />
<Link text="{i18n>contactUs}" href="mailto:xxx.xxx#xxx.com"/>
</HBox>
</VBox>
</f:content>
</f:Card>
</VBox>
</core:FragmentDefinition>
And then I put this fragment into the footer of the ObjectPageLayout, like this
<footer>
<core:Fragment fragmentName="xxx.portal.view.Footer" type="XML"/>
</footer>
However, when I try to load the page, I get the error "Assertion failed: "Element sap.m.VBox#__vbox1" is not valid for aggregation "footer" of Element sap.uxap.ObjectPageLayout#nav---connection--ObjectPageLayout"
Any idea why is it showing up and what I am doing wrong? I would also like to note that if I use some simpler elements in the footer (such as Toolbar), there is no error and it gets displayed correctly.
Thank you
I'm working in a ZK application and I need to add <row>'s components based on user input. The zul is like this:
<grid id="mygrid">
<rows id="rows">
<row>
<cell>
<label value="Rows to add 1:"/>
</cell>
<cell>
<textbox id="txt_addRows1"/>
</cell>
</row>
<!-- Here I need to add rows specified in txt_addRows1 -->
<row>
<cell>
<label value="Rows to add 2:"/>
</cell>
<cell>
<textbox id="txt_addRows2"/>
</cell>
</row>
<!-- Here I need to add rows specified in txt_addRows2 -->
<row align="right">
<cell colspan="2">
<button id="btn_generate" label="Generate"/>
</cell>
</row>
</rows>
</grid>
In the composer I can do something like:
Row someRow = new Row();
row.setParent(rows);
My question is: how do I specify that the new row (generated programmatically in the composer) to be rendered in the specified places and not others?
Any suggestion/guide is also welcomed. Thanks in advance for your answers.
There are 2 ways to insert something in the DOM.
First way is to set the parent, the second one is adding a child.
If you check the AbstractComponent api. you see they also speak of appendChild and insertBefore(Component newChild, Component refChild)
So the code would look like :
rows.insertBefore(newRow,rowWhatComesAfterYourRow);
I am attempting to display a wrapped long text in an ObjectAttribute in an SAP UI5 application:
<List id="__listObjectAttributes" noDataText="Drop list items here" headerText="Shipping Information" items="{Shipments}">
<items>
<ObjectListItem id="__listItemShipments" title="{ShipmentTxt}">
<attributes>
<ObjectAttribute id="__attributeShipmentId" title="Shipment #" text="{Id}"/>
<ObjectAttribute id="__attributeShipmentCode" title="Shipment Code" text="{ShipCd}"/>
<ObjectAttribute id="__attributeShipmentLongText" title="Long Text" text="{LongText}" binding="{ShipmentLongText}"/>
</attributes>
</ObjectListItem>
</items>
</List>
The problem is, when the list is displayed the text is truncated instead of wrapped. I've been looking for ways to wrap the text in an ObjectAttribute, but to no avail.
I have found articles that say both "you can do it" and "you can't do it".
Possible: https://archive.sap.com/discussions/thread/3589475
Not possible: https://experience.sap.com/fiori-design-web/object-list-item/
If it is not possible to add this information to an ObjectAttribute, does anyone know a way to display the same information in a list that will accept wrapped text?
Solution
#Ran Hassid's answer was correct! Using a CustomListItem in combination with a SimpleForm was the best solution. Here is the code I ended up going with:
<List id="__listObjectAttributes" noDataText="Drop list items here" headerText="Shipping Information" items="{Shipments}">
<items>
<CustomListItem id="__listItemShipments">
<content>
<form:SimpleForm id="__formShipmentList" editable="true" layout="GridLayout" labelMinWidth="100">
<form:content>
<!--Id-->
<Label id="__labelShipmentId" text="Id"/>
<Text id="__textShipmentId" text="{Id}"/>
<!--Shipment Code-->
<Label id="__labelShipmentCode" text="Shipment Code"/>
<Text id="__textShipmentCode" text="{ShipCd}"/>
<!--Long text-->
<Label id="__labelShipmentLongText" text="LongText"/>
<Text id="__textShipmentLongText" text="{Longtext}" binding="{ShipmentLongText}"/>
</form:content>
</form:SimpleForm>
</content>
</CustomListItem>
</items>
</List>
Then I added the sap.ui.layout.form to the mvc:View to simplify the code:
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns:form="sap.ui.layout.form" controllerName="shipments.controller.ShipmentDetail">
I think that even if it is possible (I assume via css changes and so on) it is not recommended because it is not part of the ObjectAttribute interface. In order to achieve the same effect you can do one of the following:
Use CustomListItem instead of ObjectListItem and inside the content of it wrap a SimpleForm. The simple form layout should be grid layout because you want to position text next to the title in the same row. In the Text control you can put as longest string as you want and also control on the wrapping of it. So your code should look something like that (I didn't use binding but I assume you will know what to do in your code)
<List noDataText="Drop list items here" id="__list0">
<items>
<CustomListItem type="Navigation" id="__item1">
<content>
<sap.ui.layout.form:SimpleForm xmlns:sap.ui.layout.form="sap.ui.layout.form" xmlns:sap.ui.core="sap.ui.core" editable="true" layout="GridLayout" id="__form0" labelMinWidth="100">
<sap.ui.layout.form:content>
<sap.ui.core:Title text="Title" id="__title0" />
<Label text="Long Text" id="__label1" />
<Text text="Very long text with\nmultiple lines" />
<Label text="Other text" id="__label2" />
<Text text="Some text goes here" />
</sap.ui.layout.form:content>
</sap.ui.layout.form:SimpleForm>
</content>
</CustomListItem>
</items>
</List>
The second option is to use CustomListItem but with VBOX + HBOX. so you have a VBOX which wrap HBOX's and inside each HBOX you put title next to the text.
I recommend to go with the first approach because it's much more clear and responsive.
Good luck.
I would recommend using basic CSS to solve this issue.
XML-View:
...
<ObjectAttribute text="{aVeryLongText}" class="objectAttributeWrapper" />
...
CSS:
.objectAttributeWrapper * {
white-space: pre-line !important;
word-wrap: break-word !important;
}
This will even work if there are changes on the sap.m.ObjectAttribute Interface, since this CSS-Selector grabs all children of the element which we assigned the CSS class to.
Speaking from my experience this was a quick and stable solution. I had to extend a legacy app, where replacing the whole control would result in me needing to rewrite a whole controller.
Works like a charm and didnt break since 1.71.50
A question regarding below process. I have a table maintained in blue box. Sample table maintenance and expected output.
How could I render the coordinates to a clickable table/grid like what is shown in red box. Which SAPUI5 control able to achieve this objective? The X will be the lot id which will be maintained in the table and it shall have an event triggered to show the detail information when user click on the cell. Some lot will have single cell and some will need to merge cell(Note: if the coordinate is not maintained, it shall leaves blank to that cell and is non-clickable).
Does this requirment able to achive using sapui5 for fiori app?
There are several ways to achieve this, but not all of them offer the complete set of functionality that you describe.
The first way that comes into mind is to use a sap.m.Table with the "mergeDuplicates" properties set on the columns. Example (working fiddle here):
<Table>
<columns>
<Column mergeDuplicates="true">
<header><Label text="1" /></header>
</Column>
<Column mergeDuplicates="true">
<header><Label text="2" /></header>
</Column>
<Column mergeDuplicates="true">
<header><Label text="3" /></header>
</Column>
</columns>
<ColumnListItem>
<Button text="A"/>
<Button text="B"/>
<Button text="X"/>
</ColumnListItem>
<ColumnListItem>
<Button text="A"/>
<Button text="C"/>
<Button text="C"/>
</ColumnListItem>
<ColumnListItem>
<Button text="A"/>
<Button text="C"/>
<Button text="C"/>
</ColumnListItem>
</Table>
The main downside of this is that you cannot merge cells across columns (i.e. in this example, you would get cell "C" twice: once for the second column and once for the third).
Another version is to use the sap.ui.layout.Grid. This has mostly the same limitation (that you can only merge "cells" in a single direction) and also has the added limitation that:
The Grid control is a layout which positions its child controls in a 12 column flow layout.
Lastly, you could use a sap.ui.commons.layout.MatrixLayout (which is deprecated btw, but no "full" replacement was provided). This actually can be used to model your problem completely. Example (working fiddle here):
<layout:MatrixLayout class="matrix">
<layout:rows>
<layout:MatrixLayoutRow height="4em">
<layout:MatrixLayoutCell padding="None" rowSpan="3">
<Button text="A" width="100%"/>
</layout:MatrixLayoutCell>
<layout:MatrixLayoutCell padding="None">
<Button text="B" width="100%"/>
</layout:MatrixLayoutCell>
<layout:MatrixLayoutCell padding="None">
<Button text="X" width="100%"/>
</layout:MatrixLayoutCell>
</layout:MatrixLayoutRow>
<layout:MatrixLayoutRow height="4em">
<layout:MatrixLayoutCell padding="None" colSpan="2" rowSpan="2" >
<Button text="C" width="100%"/>
</layout:MatrixLayoutCell>
</layout:MatrixLayoutRow>
<layout:MatrixLayoutRow height="4em">
</layout:MatrixLayoutRow>
</layout:rows>
</layout:MatrixLayout>
But as you see, it is slightly more complicated and may need some CSS fiddling.
I have issue with making below layout. Please provide me some code example how to create below layout. As the screenshot depict I need two part equally sized. Left part containing the latin text and right side the radio buttons and rest. The "From" teksts should be left aligned and the amounts and icons should be right alligned. How do I construct this layout best way in ZK and in ZK way ?
Screenshot Example
You can see below code for demo purpose and adjust component according to your requirments
<zk>
<window border="normal" title="hello" apply="pkg$.TestComposer" width="100%" height="100%">
<hbox heights="40%,20%,40%" width="100%" height="100%">
<borderlayout width="100%" height="100%">
<center>
Here is My Content
</center>
</borderlayout>
<borderlayout width="100%" height="100%">
<center>
<vbox widths="30%,30%,30%" width="100%" height="100%">
<checkbox />
<checkbox />
<checkbox />
</vbox>
</center>
</borderlayout>
<splitter width="100%"/>
<borderlayout width="100%" height="100%">
<center>
<vbox widths="30%,30%,30%" width="100%" height="100%">
<label value = "hariom123"/>
<label value = "hariom123"/>
<label value = "hariom123"/>
</vbox>
</center>
</borderlayout>
</hbox>
</window>
</zk>
You can run above code in Zk Fiddle
It kills me to respond to this answer given the level of detail you provided. In the future please do post some code showing what you've tried and why it doesn't work. With that, we can quickly get you back on track. Your question here is just fishing for code =/
<hlayout hflex="1">
<!--
size/flex on labels doesn't work, wrap label in a div to control size
-->
<div hflex="1">
<label value="lorem ipsum.."/>
</div>
<grid hflex="1">
<columns>
<!--
Last column is small, first two share available space.
-->
<column>
<column>
<column width="30px">
</columns>
<rows>
<row>
<radio label="This is a radio button"/>
<label value="From: 100,00 $"/>
<image src="info.png"/>
<row>
<row>
<radio label="This is a radio button 2"/>
<label value="From: 200,00 $"/>
<image src="info.png"/>
<row>
<row>
<radio label="This is a radio button 3"/>
<label value="0,00 $"/>
<image src="info.png"/>
<row>
</rows>
</grid>
</hlayout>
There are many other ways to get this layout. I chose a grid next to a div so the radio buttons, labels, and icons on the right are guaranteed to line up. You have other options though.
PS: of course you will need to apply CSS to make the ZK grid less gaudy.