I have a table(sap.m.table) with radiobutton control in the first column.
The table shows different "prices" from which the user should be able to choose only one. My problem is, when i use the cancel button it should delete all selections made (in dropdowns, datefilter, etc.). It works for every control except radiobutton.
<ColumnListItem> <cells>
<RadioButton id="radiobutton" groupName="tablebuttons" select="onSelect"/>.....
When i leave the view with the cancel button and then open it again in the same session, the previous selected radiobutton is still selected.
I cant find any method to set it to unselected. When i use this.getView().byId("radiobutton").getSelected()
it always gives back "false".
Is it because there is one button for each table row and i only select (the first?) one? If so, how can i search all button for the selected one and deselect it?
You must have added id="radiobutton" to the template list item which is used for aggregation binding. That is why calling byId("radiobutton") does not return any rendered radio button but the template instance. If you check the IDs of the radio buttons from the HTML document, you'll notice that they all contain the generated prefix __clone0, __clone1, etc.
I can't find any method to set it to unselected.
To deselect a radio button, use:
In case of RadioButton: .setSelected(false)
In case of RadioButtonGroup: .setSelectedIndex(-1)
But you might not even need any sap.m.RadioButton to add manually to the table. Since sap.m.Table extends from sap.m.ListBase, it can have a radio button in each list item via mode="SingleSelectLeft". Here is a demo:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/model/json/JSONModel"
], JSONModel => sap.ui.xmlview({
async: true,
viewContent: `<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
controllerName="MyController"
>
<Table
mode="SingleSelectLeft"
selectionChange=".onSelectionChange"
includeItemInSelection="true"
items="{prices>/}">
<columns>
<Column>
<Text text="Price"/>
</Column>
<Column>
<Text text="Foo"/>
</Column>
</columns>
<items>
<ColumnListItem selected="{prices>selected}" >
<ObjectNumber number="{prices>price}" />
<Text text="bar" />
</ColumnListItem>
</items>
</Table>
<Button
class="sapUiTinyMargin"
text="Deselect"
type="Emphasized"
press=".onResetPress"
/>
</mvc:View>`,
controller: sap.ui.controller("MyController", {
onInit: function() {
const model = new JSONModel(this.createModelData());
this.getView().setModel(model, "prices");
},
onResetPress: function() {
const model = this.getView().getModel("prices");
model.setProperty("/", this.createModelData());
},
createModelData: () => [{
price: 111.01,
}, {
price: 222.0245,
}, {
price: 333,
}],
}),
}).loaded().then(view => view.placeAt("content"))));
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-preload="async"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-xx-waitForTheme="true"
></script><body id="content" class="sapUiBody sapUiSizeCompact"></body>
IMO, you should use a model to set/reset values and not called the setter function of control. here is an example of using MVC
http://jsbin.com/zijajas/edit?html,js,output
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>MVC</title>
<script id="sap-ui-bootstrap" type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.table"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:table="sap.ui.table">
<table:Table id="Table1" rows="{/}"
selectionMode="None">
<table:title>
<Button icon="sap-icon://reset" press="reset" />
</table:title>
<table:columns>
<table:Column>
<Label text="Employee name"/>
<table:template>
<Text text="{name}" ></Text>
</table:template>
</table:Column>
<table:Column>
<Label text="Company"/>
<table:template>
<Text text="{company}"></Text>
</table:template>
</table:Column>
<table:Column>
<Label text="Radio"/>
<table:template>
<RadioButtonGroup selectedIndex="{radio}">
<RadioButton text="no" />
<RadioButton text="yes" />
</RadioButtonGroup>
</table:template>
</table:Column>
<table:Column>
<Label text="Bonus"/>
<table:template>
<Input value="{bonus}" />
</table:template>
</table:Column>
</table:columns>
</table:Table>
</mvc:View>
</script>
</head>
<body class="sapUiBody sapUiSizeCompact" role="application">
<div id="content"></div>
</body>
</html>
controller
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
"use strict";
var oController = Controller.extend("myView.Template", {
onInit: function(oEvent) {
this.getView().setModel(new JSONModel([{
name : "John",
company: "apple inc",
radio: 0,
bonus: "0"
}, {
name : "Mary",
company: "abc inc",
radio: 0,
bonus: "0"
},
]));
},
reset: function() {
var oModel = this.getView().getModel();
oModel.getProperty('/').forEach(function(item) {
item.radio = 0;
item.bonus = 0;
});
oModel.refresh();
}
});
return oController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
Related
In my XML view, I have a Table, in that Table I have Input field at a particular column, and I have a function for liveChange event of that Input field. Code is like below:
<Table ...>
<columns> ... </columns>
<items>
<ColumnListItem>
<cells>
......
<Input type ="Number" value="{...}" liveChange="qtyChanged"/>
</cells>
</ColumnListItem>
</items>
</Table>
In qtyChanged(), I need to know the row number on which user is editing. How to achieve it?
You can achieve it using indexOfItem() of sap.m.Table
qtyChanged: function(oEvent){
var oRow = oEvent.getSource().getParent();//Get Row
var oTable = oRow.getParent();// Get Table
var iRowIndex = oTable.indexOfItem(oRow);//Get Row index
}
Note: If the response data is more then table row limit then scroll will appear, then the row index will not work properly.
you can get the binding context and then the path. you're also able to get the object itself like this (working example http://jsbin.com/hutuvo/edit?html,output)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>MVC</title>
<script id="sap-ui-bootstrap" type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.table"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script id="oView" type="sapui5/xmlview">
<mvc:View
controllerName="sap.example.Controller"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
height="100%">
<Table id="idProductsTable" items="{ path: 'suppliers>/suppliers'}">
<columns>
<Column><Text text="Supplier" /></Column>
<Column><Text text="Quantity" /></Column>
</columns>
<items>
<ColumnListItem>
<cells><Text text="{suppliers>SupplierName}" /></cells>
<cells><Input type ="Number" value="{suppliers>Quantity}" liveChange="qtyChanged" /></cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>
<script>
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel"],
function(Controller, JSONModel) {
"use strict";
var oPageController = Controller.extend("sap.example.Controller", {
onInit: function() {
var oView = this.getView();
oView.setModel(new JSONModel({
suppliers: [
{
SupplierName: "Apple",
Product: "iPhone",
Quantity: 0
}, {
SupplierName: "Samsung",
Product: "Galaxy",
Quantity: 0
}
]
}), "suppliers");
},
qtyChanged: function(oEvent) {
var oContext = oEvent.getSource().getBindingContext("suppliers");
var oPath = oContext.getPath();
var index = parseInt(oPath.substring(oPath.lastIndexOf("/") + 1), 10);
console.log(index);
console.log(oContext.getObject());
}
});
return oPageController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
I have to create a table (sap.m.Table) in SAPUI5 where rows can be deleted, reordered, and clicked on to open a dialog. So far I've figured out that I can set the Table to mode="delete" and ColumnListItem to type="Navigation" to achieve deleting rows and clicking on rows to open dialogs at the same time:
Is it possible to add the functions to reorder rows to this?
You can use a "editModeEnabled" variable in your view model to change the Table mode to "SingleSelectLeft" and show/hide some buttons. Then in "editMode", use some buttons to insert and remove the items of the table wherever you want
Here a snippet
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Page>
<Table id="myTable" mode="{= ${viewModel>/editModeEnabled} ? 'SingleSelectLeft' : 'SingleSelectMaster'}" items="{path:'json>/rows'}">
<headerToolbar>
<Toolbar>
<ToolbarSpacer></ToolbarSpacer>
<Button text="Edit" press="onEditPressed" visible="{= ${viewModel>/editModeEnabled} ? false : true}"></Button>
<Button icon="sap-icon://slim-arrow-down" press="onDownPressed" visible="{= ${viewModel>/editModeEnabled} ? true : false}"></Button>
<Button icon="sap-icon://slim-arrow-up" press="onUpPressed" visible="{= ${viewModel>/editModeEnabled} ? true : false}"></Button>
<Button text="Finish" press="onFinishEditPressed" visible="{= ${viewModel>/editModeEnabled} ? true : false}"></Button>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="Column1" />
</Column>
<Column>
<Text text="Column2" />
</Column>
</columns>
<items>
<ColumnListItem>
<Text text="{json>col1}"></Text>
<Text text="{json>col2}"></Text>
</ColumnListItem>
</items>
</Table>
</Page>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {
onInit: function(){
var oViewModelData = {
editModeEnabled: false
};
var oViewModel = new sap.ui.model.json.JSONModel();
this.getView().setModel(oViewModel, "viewModel")
},
onEditPressed: function() {
this.getView().getModel("viewModel").setProperty("/editModeEnabled", true);
},
onFinishEditPressed: function(){
this.getView().getModel("viewModel").setProperty("/editModeEnabled", false);
},
onUpPressed: function(oEvent){
var oSelectedItem = this.getView().byId("myTable").getSelectedItem();
var oCurrentIndex = this.getView().byId("myTable").indexOfItem(oSelectedItem);
if(oCurrentIndex > 0){
this.getView().byId("myTable").removeItem(oSelectedItem);
this.getView().byId("myTable").insertItem(oSelectedItem, oCurrentIndex-1);
}
},
onDownPressed: function(oEvent){
var oSelectedItem = this.getView().byId("myTable").getSelectedItem();
var oCurrentIndex = this.getView().byId("myTable").indexOfItem(oSelectedItem);
if(oCurrentIndex < this.getView().byId("myTable").getItems().length){
this.getView().byId("myTable").removeItem(oSelectedItem);
this.getView().byId("myTable").insertItem(oSelectedItem, oCurrentIndex+1);
}
}
});
/*** THIS IS THE "APPLICATION" CODE ***/
// create a Model and assign it to the View
//Using a small JSON model
var myData = {
rows: [
{
col1: "Row1Col1",
col2: "Row1Col2",
},{
col1: "Row2Col1",
col2: "Row2Col2",
},{
col1: "Row3Col1",
col2: "Row3Col2",
}
]
};
var oJSONModel = new sap.ui.model.json.JSONModel(myData);
// instantiate the View
var myView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
}); // accessing the HTML inside the script tag above
// Set the Models
myView.setModel(oJSONModel, 'json');
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
Is it possible to disable row selector for particular rows. setEnable method is not available for sap.ui.table. Please find the attached screenshot for better understanding.
please go through the following code. It might help you.
sap.ui.controller("my.controller", {
onInit: function() {
var model = new sap.ui.model.json.JSONModel([
{Product: "Power Projector 4713", Weight: "33"},
{Product: "Gladiator MX", Weight: "33"},
{Product: "Hurricane GX", Weight: "45"},
{Product: "Webcam", Weight: "33"},
{Product: "Monitor Locking Cable", Weight: "41"},
{Product: "Laptop Case", Weight: "64"}
]);
var vw = this.getView();
vw.setModel(model);
// disable checkboxes
var tbl = vw.byId('tblProduct');
tbl.addDelegate({
onAfterRendering: function() {
var header = this.$().find('thead');
var selectAllCb = header.find('.sapMCb');
selectAllCb.remove();
this.getItems().forEach(function(r) {
var obj = r.getBindingContext().getObject();
var enabled = parseInt(obj.Weight, 10) > 40;
var cb = r.$().find('.sapMCb');
var oCb = sap.ui.getCore().byId(cb.attr('id'));
oCb.setEnabled(enabled);
});
}
}, tbl);
}
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#chartView').html()
}).placeAt('content');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<script id="chartView" type="sapui5/xmlview">
<mvc:View
controllerName="my.controller"
xmlns:l="sap.ui.layout"
xmlns:u="sap.ui.unified"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
class="viewPadding">
<App>
<pages>
<Page title="Table CheckBox Disable" class="marginBoxContent" >
<content>
<Table id="tblProduct" mode= "MultiSelect"
selectionChange = "rowSelect"
items="{/}">
<columns>
<Column>
<Label text="Product" />
</Column>
<Column>
<Label text="Weight" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{Product}" />
<Text text="{Weight}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
</mvc:View>
</script>
</head>
<body class="sapUiBody">
<div id='content'></div>
</body>
</html>
Regards,
Farooq.
I am trying to make a custom dialog to show some text and link in the footer along with buttons. I don't know how to change the existing rendering for this, so I wrote a simple renderer to check the behavior. This is my code:
sap.m.Dialog.extend("EnhancedDialog",{
metadata:{
properties:{
footerLabelText:{type:"string",defaultValue:null},
footerLinkText:{type:"string",defaultValue:null},
footerLinkHref:{type:"string",defaultValue:null}
},
aggregations:{
_label:{type:"sap.m.Label",multiple:false,visibility:"hidden"},
_link:{type:"sap.m.Link",multiple:false,visibility:"hidden"}
},
events:{}
},
init:function(){
this.getAggregation("_label", new sap.m.Label({text:"Check"}));
this.getAggregation("_link",new sap.m.Link({text:"Link"}));
},
setFooterLabelText:function(oLabelText){
this.setProperty("footerLabelText",oLabelText,true);
this.getAggregation("_label").setText(oLabelText);
},
setFooterLinkText:function(oLinkText){
this.setProperty("footerLinkText",oLinkText,true);
this.getAggregation("_link").setText(oLinkText);
},
setFooterLinkHref:function(oLinkHref){
this.setProperty("footerLinkHref",oLinkHref,true);
this.getAggregation("_link").setHref(oLinkHref);
},
renderer:{
render:function(oRM,oControl){
oRM.write("<div");
oRM.writeControlData(oControl);
oRM.writeClasses();
oRM.write(">");
oRM.renderControl(oControl.getAggregation("_label"));
oRM.renderControl(oControl.getAggregation("_link"));
oRM.write("</div");
}
}
});
var enhancedDialog=new EnhancedDialog();
var btn=new sap.m.Button({
text:"Click Here!",
press: function(){
enhancedDialog.open();
}
});
But I am getting the error
Dialog.js:6 Uncaught TypeError: Cannot read property 'setInitialFocusId' of undefined
when I am clicking the button.
Can someone point out what I am doing wrong?
And how to change the existing renderer behavior to show text in the footer?
This is what I want to make:
The error you are seeing is because you have overwritten the init() method and not called the overwritten init() of Dialog. So the internal popup and other stuff does not get initialized. You have to call the base.init() this way:
init:function(){
sap.m.Dialog.prototype.init.apply(this,arguments);
this.getAggregation("_label", new sap.m.Label({text:"Check"}));
this.getAggregation("_link",new sap.m.Link({text:"Link"}));
},
However you will need to copy most of the DialogRenderers code to get a fully functional dialog.
Alternatively you could use the unmodified DialogRender and overwrite the Dialog._createToolbarButtons() method to add your Label and Link to the beginning:
_createToolbarButtons:function () {
Dialog.prototype._createToolbarButtons.apply(this,arguments);
var toolbar = this._getToolbar();
var toolbarContent = toolbar.getContent();
toolbar.removeAllContent();
toolbar.addContent(this.getAggregation("_label"));
toolbar.addContent(this.getAggregation("_link"));
// insertContent is not implemented correctly...
toolbarContent.forEach(function(control){toolbar.addContent(control)});
},
renderer:DialogRenderer
Full example on Plunker.
[...] show some text and link in the footer along with buttons.
Having a customizable Dialog footer is now supported since UI5 1.110. Simply define sap.m.Toolbar in the new <footer> aggregation of your sap.m.Dialog. For example:
<Dialog xmlns="sap.m" title="Title" initialFocus="okButton">
<!-- ... -->
<footer> <!-- Since UI5 1.110: -->
<Toolbar>
<Text text="Some text!" />
<ToolbarSpacer />
<Button id="okButton" text="OK" type="Emphasized" />
<Button text="Cancel" />
</Toolbar>
</footer>
</Dialog>
Sample demo:
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], async (XMLView) => {
"use strict";
const control = await XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
displayBlock="true"
height="100%"
>
<App autoFocus="false">
<dependents>
<Dialog id="myDialog"
class="sapUiResponsiveContentPadding sapUiResponsivePadding--header sapUiResponsivePadding--content sapUiResponsivePadding--footer"
initialFocus="okButton"
title="Title"
draggable="true"
resizable="true"
>
<Text text="Content ..." />
<footer>
<Toolbar>
<Text text="Some text in the footer!" />
<ToolbarSpacer />
<Button id="okButton" text="OK" type="Emphasized" />
<Button text="Cancel" />
</Toolbar>
</footer>
</Dialog>
</dependents>
</App>
</mvc:View>`,
afterRendering: function () {
this.byId("myDialog").open();
}
});
control.placeAt("content");
})
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified,sap.ui.layout"
data-sap-ui-async="true"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-theme="sap_horizon"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
I have an XML view which I am using to display an IconTabBar. On the user selecting one of these "IconTab's" I would like to trigger a method in the controller js file.
I have the following code for one of the IconTab definitions.
<IconTabFilter text="Data" icon="sap-icon://documents" press="onData">
<content press="onData" id="data">
<cmn:Tree nodes="{/aRoot}">
<cmn:TreeNode text="{#name} TagNameHere?"></cmn:TreeNode>
</cmn:Tree>
</content>
</IconTabFilter>
I was assuming the press="onData" would allow me to trigger a method on the controller file. It does not.
Does anyone know if this can be done and if so how?
Thanks
Martin
You can use the select(oControlEvent) event of the parent IconTabBar by switching the logic according to the key value of IconTabFilter
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns:l="sap.ui.layout" controllerName="test.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
<l:VerticalLayout>
<IconTabBar select="onSelectChanged">
<items>
<IconTabFilter key="1" text="Test1">
<Text text="Test1 " />
</IconTabFilter>
<IconTabFilter key="2" text="Test2">
<Text text="Test2 " />
</IconTabFilter>
</items>
</IconTabBar>
</l:VerticalLayout>
</mvc:View>
</script>
<script>
sap.ui.controller("test.controller", {
onSelectChanged: function(oEvent) {
var key =oEvent.getParameters().key;
if(key=='1') {
alert("Click Test1");
}
else if(key == '2')
{
alert("Click Test2")
};
}
});
var oView = sap.ui.xmlview({
viewContent: jQuery("#view1").html()
});
oView.placeAt("content");
</script>
<boy class="sapUiBody" id="content" />