I have a smart table with smart filters in my UI5 application. The smart filters apply the filters to the table perfectly fine as well as clearing the filters on the table just fine. However, the framework requires the user to click on the Go button to apply any filter changes and then only will the table get refreshed. Is there a way to create a custom clear button that will automatically refresh the table upon clicking the clear button? (see screenshots below)
<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="XxxxX" enableBasicSearch="true"
basicSearchFieldName="XxxxX1, XxxxX2, XxxxX3"
useDateRangeType="true" showClearOnFB="true">
<smartFilterBar:controlConfiguration>
<smartFilterBar:ControlConfiguration key="XxxxX1" label="XxxxX1" visibleInAdvancedArea="true" visible="true" index="2"></smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="XxxxX2" label=XxxxX2" visibleInAdvancedArea="true" visible="true" index="3"></smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="XxxxX3" label="XxxxX3" visibleInAdvancedArea="true" visible="true" index="6"></smartFilterBar:ControlConfiguration>
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable id="smartTable" entitySet="XxxxX" smartFilterId="smartFilterBar" tableType="ResponsiveTable"
useExportToExcel="true" beforeExport="onBeforeExport" useVariantManagement="true" useTablePersonalisation="true"
persistencyKey="SmartTableAnalytical_Explored" enableAutoBinding="true" class="sapUiResponsiveContentPadding tablehdr"
beforeRebindTable='onBeforeRebindTable' afterVariantInitialise="onVariantLoad">
<ui:Table enableBusyIndicator="true" threshold="200" class=" smartTableHeader" id="customTable" cellClick="onCellPress">
Related
I am using sap.m.UploadCollection to manage files selected by the user and upload to the server. I want the user to select all the required files then press a 'Save' button to upload all the files at one time. Thus I have set instantUpload to false. This UploadCollection is a part of the items in a sap.m.List. When the user selects a file from the file system an upload is automatically performed (not desired). If I use the same UploadCollection definition outside of the List it does not upload immediately. I need to get it working properly inside the list.
Code Snippet:
<List
items="{ path: 'submittal>/submission', templateShareable: true }">
<layoutData>
<layout:GridData span="XL12 L12 M12 S12"/>
</layoutData>
<items>
<CustomListItem>
<Panel headerText="Round # {submittal>roundId}" expandable="true" expanded="true">
<forms:SimpleForm layout="ResponsiveGridLayout" editable="true">
<UploadCollection
noDataText="No documents on file"
items="{path : 'submittal>documents', templateShareable : false}"
mode="SingleSelectMaster"
uploadEnabled="true"
uploadButtonInvisible="false"
uploadUrl="OptionController?optionId=JS002&action=submittalUpload"
instantUpload="false"
multiple="true"
beforeUploadStarts="submittalBeforeUpload"
uploadComplete="submittalUploadComplete"
selectionChange="documentSelected">
<layoutData>
<layout:GridData span="XL6 L8 M10 S12" linebreakXL="true" linebreakL="true" linebreakM="true" linebreakS="true" />
</layoutData>
<items>
<UploadCollectionItem
documentId="{submittal>id}"
fileName="{submittal>name}"
mimeType="{submittal>typeName}"
selected="{submittal>selected}"
visibleEdit="false"
enableDelete="true"
deletePress="documentDelete">
<attributes>
<ObjectAttribute title="File size" text="{ path: 'submittal>size', formatter: '.formatFileSize' }" />
</attributes>
</UploadCollectionItem>
</items>
</UploadCollection>
</forms:SimpleForm>
</Panel>
</CustomListItem>
</items>
</List>
UI5 Version: 1.78.1
Any help would be appreciated.
Thank you
It is not recommended to use UploadCollection directly inside List, Table, etc. but there is a simple workaround.
Just put a sap.m.Button into sap.m.List instead of using directly sap.m.UploadCollection. Then define fragment with a sap.m.Dialog that has sap.m.UploadCollection inside. In a button press event callback you just bind a row context into a dialog so you'll be able to show correct uploaded files (if there are any).
You can also design a button in your list in a way that you use attachment icon as an icon property and a number (counter) in a text property indicating how many files have been already uploaded.
It would be confusing for an end user to see list items and then another items (files) from UploadCollection inside one or more list items..
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
<ObjectListItem
title="{i18n>uBOMItem}: {Item} Component: {ComponentDesc}"
number="{ComponentNo}"
>
I am using sap.m.ObjectListItem. While binding, I need tab space between {Item} & {ComponentDesc}.
E.g. like \t
Currently, sap.m.ObjectListItem does not support rendering whitespace for title.
And I agree with alexP's answer that it's not clean to combine multiple labels ("{i18n>uBOMItem}:" and "Component:") into one.
That being said; if it's really necessary to do so, however, you'll need to extend ObjectListItem.
Example: https://embed.plnkr.co/WaMaP4wqMevsjMxX
Internally, ObjectListItem renders its title from sap.m.Text. The Text control has a public property called renderWhiteSpaceapi which we can use to allow tabs to be rendered.
ObjectListItem is only for one value. In your case it's better to use CustomListItem.
<CustomListItem>
<HBox width="100%">
<VBox>
<Label emphasized="true" text="{i18n>uBOMItem}: {Item}" />
</VBox>
<VBox class="sapUiSmallMarginBegin">
<Label emphasized="true" text="Component: {ComponentDesc}" />
</VBox>
<VBox width="50%" justifyContent="End">
<ObjectNumber number="{ComponentNo}" />
</VBox>
</HBox>
</CustomListItem>
It's not clean to output two data bindings from your model in one label, text or similar. You should split the output. In case of an i18n label and a data binding in one control i would make a exception.
I am using a sapui5 smart table to list down my products. It includes product code, product description and order quantity.
Among these three fields i want to update only the order quantity. It should be an inline editing in the table.
In my smart table i have enabled the property "editable" as "true". It makes the entire row is editable. Instead of making entire row editable, i want make only one cell to be editable.
Example
<smartFilterBar:SmartFilterBar id="smartFilterBar" entityType="ZDEMO_C_MyEntityType" persistencyKey="SmartFilter_Explored">
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable id="mySmartTable"
smartFilterId="smartFilterBar"
tableType="GridTable"
editable="true"
entitySet="ZDEMO_C_MyEntity"
useVariantManagement="false"
useTablePersonalisation="true"
header="My Products"
showRowCount="true"
useExportToExcel="true"
enableAutoBinding="true">
</smartTable:SmartTable>
I can see 2 ways:
Make use of "field controls" concept. It requires adding a special properties within your entity type, which define the state of the fields (cells). Also some annotations have to be introduced (in the metadata.xml by backend) to initiate the handling.
Here is a link where concept described using Form control as an example, but the same rules are applicable for Table as well:
https://blogs.sap.com/2017/06/06/dynamic-field-control-using-annotations-in-sapui5/
Redefine the table rows manually in your XML and bind the needed cell(s) against the property of the local JSON model, which could be changed depending on some conditions (e.g. Edit button press).
The 1st approach is better from the architectural perspective but requires some data model modifications (from the backend side).
The 2nd approach allows to do everything on UI and program some complex UI logic, which defines the cells state.
You choose.
You can add a sap ui table inside the smart table and add columns with customdata property. Follow these steps.
Make editable="true" as editable="false"
In your xml, make sure to add this namespace xmlns:core="sap.ui.core"
Within the smarttable tag add below.
<smartTable:SmartTable .................................
<Table>
<columns>
<Column>
<customData>
<core:CustomData key="p13nData" value='\{"columnKey": "OrderQty", "leadingProperty": "OrderQty", "columnIndex":"2"}'/>
</customData>
<Text text="Order Qty"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Input value="{OrderQty}" type="Number" editable="true"/>
</cells>
</ColumnListItem>
</items>
</Table>
</smartTable:SmartTable>
Add below tag inside table to make your column editable
<table:Column sortProperty="Max_Capacity" filterProperty="Max_Capacity" id="maxCapCol">
<Label text="Max Capacity"/>
<table:template>
<Input text="{Max_Capacity}" />
</table:template>
</table:Column>
What is the meaning of the <l:content> tag in SAPUI5? I know it is about content, but the references to this tag in the documentation are not making sense to me. Can someone give me use cases for this tag? It is used only on the <l:Grid> control?
Thanks in advance!
The Grid is the sap.ui.layout.Grid .
As you can see that Grid has an aggregation called content. The Tag <l:content> is placed there to show the interpreter, which aggregation you fill.
That is not the problem in the sap.ui.layout.Grid, since it has only one aggregation, but ...
... imagine you want to use a sap.ui.layout.form.SimpleForm.
The SimpleForm has the aggregations titleand content. So to define a title you have to write the tag <title> (with the correct prefix, in this case it would be eg. <f:title> with xmlns:f="sap.ui.layout.forms")
<mvc:View xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc">
<f:SimpleForm>
<f:title>some random title</f:title>
<f:content>
<!-- any sap.ui.core.Control you like -->
</f:content>
</f:SimpleForm>
</mvc:View>
And another thing: The aggregation, that is marked with "(default aggregation)" (in the case with the Grid it is content) you do not have to add the tag.
<mvc:View xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc">
<f:SimpleForm>
<f:title>some random title</f:title>
<!-- any sap.ui.core.Control you like, is is recognized as content -->
</f:SimpleForm>
</mvc:View>