How to provide new line in the headertoolbar? - sapui5

I am creating a table using sap.m.table. For that I need to create a headertoolbar.
My question is, how would I create elements in separate lines(one item per line) by using the aggregation headertoolbar of sap.m.table?


Solution in js view, Please adjust the width according to your needs
headerToolbar: [
new sap.m.Toolbar({
height: 'auto',
content: [
new sap.m.VBox({
items: [
new sap.m.HBox({
items: [
new sap.m.SearchField({
placeholder: "search"
})
]
}),
new sap.m.HBox({
items: [
new sap.m.Button({
text: "One"
}),
new sap.m.Button({
text: "Two"
}),
new sap.m.Button({
text: "Three"
}),
new sap.m.Button({
text: "Four"
}),
new sap.m.Button({
text: "Five"
})
]
})
]
})
]
})
]
Solution in XML View
<headerToolbar>
<Toolbar height='auto'>
<content>
<VBox>
<Text text="Text one" />
<Text text="Text two" />
<Text text="Text three" />
<Text text="Text four" />
</VBox>
</content>
</Toolbar>
</headerToolbar>

Related

How to remove the space between bar and legend in a sapui5 StackedBarChart

I like to create a barchart and have gotten pretty far.
My chart is a standalone view and next to some other views inside of a Shell>App>Page
View.view.xml:
<mvc:View
controllerName="my.controller.Chart"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:viz="sap.viz.ui5.controls"
xmlns:vizData="sap.viz.ui5.data"
xmlns:vizFeeds="sap.viz.ui5.controls.common.feeds"
displayBlock="true"
height="100%"
busyIndicatorDelay="0"
class="myChartView"
>
<Panel
headerText="Chart"
class="sapUiResponsiveMargin"
width="auto"
>
<viz:VizFrame
vizType="100_stacked_bar"
id="idDualStackedChart"
width="100%"
class="myStackedBarChart"
vizProperties="{plotArea: {
dataLabel:{
visible: true
},
colorPalette: ['#009c00','#ff0000'],
gridline: {
visible: false
}
},
interaction: {
noninteractiveMode: true
},
title:{ visible: false, text:'Auslastung'},
categoryAxis: {visible: false},
valueAxis: {visible: false},
legendGroup: {
layout: {
position: 'bottom',
alignment: 'center'
}
}
}"
>
<viz:dataset>
<vizData:FlattenedDataset data="{/items}">
<vizData:dimensions>
<vizData:DimensionDefinition
name="Maschine"
value="{Machine}"
/>
</vizData:dimensions>
<vizData:measures>
<vizData:MeasureDefinition
name="Stopped"
value="{Stopped}"
/>
<vizData:MeasureDefinition
name="Running"
value="{Running}"
/>
</vizData:measures>
</vizData:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<vizFeeds:FeedItem
uid="valueAxis"
type="Measure"
values="Running,Stopped"
/>
<vizFeeds:FeedItem
uid="categoryAxis"
type="Dimension"
values="Maschine"
/>
</viz:feeds>
</viz:VizFrame>
</Panel>
</mvc:View>
Chart.controller.ts
import Controller from "sap/ui/core/mvc/Controller";
import JSONModel from "sap/ui/model/json/JSONModel";
export default class ChartController extends Controller {
onInit() {
const oSampleData = new JSONModel("model/Data.json");
this.getView().setModel(oSampleData);
const chartFrame = this.byId("idDualStackedChart");
console.log(chartFrame);
}
}
Data.json
{
"items": [
{
"Machine": "Q1",
"Stopped": "20",
"Running": "40"
}
]
}
The only problem I have is: There is a lot of space above the chart and a lot of space between the chart-bar and the legend.
How can I decrease/remove this space?

How to edit a row using dialogue box

I have created a sap ui5 table with 5 columns where One of the column of table will have a button with edit icon.
I have tried as below:
<Table id="table2" visibleRowCount="5" rows="{
path: '/ProductCollection',
sorter: {path: 'serialId', descending: false}
}">
<columns>
<Column width="50px">
<m:Text text="S.No" />
<template>
<m:Text text="{serialId}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="EmployeeName" />
<template>
<m:Text text="{employeeName}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="EmployeeId" />
<template>
<m:Text text="{employeeId}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="Age" />
<template>
<m:Text text="{age}" wrapping="false" />
</template>
</Column>
<Column width="200px">
<m:Text text="Email" />
<template>
<m:Text text="{email}" wrapping="false" />
</template>
</Column>
<Column hAlign="End" width="4rem" >
<m:Text text="Edit" />
<template>
<m:Button icon="sap-icon://edit" press="editRow" type="Reject"/>
</template>
</Column>
</columns>
<dragDropConfig>
<dnd:DropInfo
groupName="moveToTable2"
targetAggregation="rows"
dropPosition="Between"
drop="onDropTable2" />
<dnd:DragDropInfo
sourceAggregation="rows"
targetAggregation="rows"
dropPosition="Between"
dragStart="onDragStart"
drop="onDropTable2" />
</dragDropConfig>
</Table>
On click of the edit button, a dialog box should open along with the data of the clicked row.
I have tried editing the row with the below function
where I am opening a dialog box with the current values , so that update on click of OK.
And this is my controller:
editRow: function(oEvent) {
var oControl = oEvent.getSource();
var oItemPath = oControl.getBindingContext().getPath();
var oObject = this.byId("table2").getModel() .getProperty(oItemPath);
var editRecord = oEvent .getSource().getBindingContext() .getObject();
var editRecordRank = editRecord.Rank;
var oDialog1 = new Dialog({
title: "Wafer",
contentWidth: "40px",
contentHeight: "300px",
content: [
new sap.m.Text({
width: "100%",
text: "EMPid"
}),
new sap.m.FlexBox({
justifyContent: "Center",
items: [
new sap.m.Select("EmployeeEditId", {
width: "60%",
items: [
new sap.ui.core.Item("itemee11", { text: "33" }),
new sap.ui.core.Item("iteme12", {
text: "78"
}),
new sap.ui.core.Item("itemee13", {
text: "100"
}),
new sap.ui.core.Item("iteme14", {
text: "75"
}),
new sap.ui.core.Item("iteme15", {
text: "101"
})
]
})
]
}),
new sap.m.Text({ width: "100%", text: "EMPname" }),
new sap.m.FlexBox({
justifyContent: "Center",
items: [
new sap.m.Select("EmployeeNameEditId", {
width: "60%",
items: [
new sap.ui.core.Item("iteme1111", {
text: "test1"
}),
new sap.ui.core.Item("iteme1234", {
text: "test2"
}),
new sap.ui.core.Item("iteme1312", {
text: "test3"
})
]
})
]
}),
new sap.m.Text({ width: "100%", text: "age" }),
new sap.m.FlexBox({
justifyContent: "Center",
items: [
new sap.m.Select("AgeEditId", {
width: "60%",
items: [
new sap.ui.core.Item("iteme15211", { text: "22" }),
new sap.ui.core.Item("iteme136454", { text: "23" }),
new sap.ui.core.Item("iteme213754", { text: "33" }),
]
})
]
}),
new sap.m.Text({ width: "100%", text: "Email" }),
new sap.m.FlexBox({
justifyContent: "Center",
items: [
new sap.m.Select("EmailEditId", {
width: "60%",
items: [
new sap.ui.core.Item("iteme11411", { text: "a#gmail.com" }),
new sap.ui.core.Item("iteme34", { text: "b#hotmail.com" }),
new sap.ui.core.Item("iteme314", { text: "c#hotmail.com" })
]
})
]
})
],
beginButton: new Button({
type: ButtonType.Emphasized,
text: "Update",
press: function() {
var otab = this.byId("table2");
var rows = otab.getRows();
var rowsLength = otab.getBinding('rows').getLength();
var tableArr = [];
for ( var i = 0; i < rowsLength; i++ ) {
tableArr.push({
empId : rows[i].getCells()[0].getText(),
employeeName : rows[i].getCells()[1].getText(),
age: rows[i].getCells()[2].getText(),
email : rows[i].getCells()[3].getText(),
});
}
var employeeId= sap.ui.getCore().byId("empId ");
var empnameId = sap.ui.getCore().byId("employeeName ");
var ageId = sap.ui.getCore().byId("age");
var emailId = sap.ui .getCore().byId("email");
// data=oEvent.getSource
var componentText =empId.mAssociations.selectedItem;
var categoryText = empnameId.mAssociations.selectedItem;
var quantityText = ageId.mAssociations.selectedItem;
var mainCategoryText = emailId.mAssociations.selectedItem;
var cValue = sap.ui.getCore().byId(componentText) .mProperties.text;
var catValue = sap.ui.getCore().byId(categoryText).mProperties.text;
var qValue = sap.ui.getCore().byId(quantityText).mProperties.text;
var mValue = sap.ui.getCore().byId(mainCategoryText) .mProperties.text;
tableArr.map(function(item) {
if (item.empId==cValue){
item.empnameId = catValue;
item.ageId = qValue;
item.emailId = mValue;
}
return item; });
// var aContexts = sap.ui.getCore().byId("test");
var oModel = new sap.ui.model.json.JSONModel();
var oTable = this.byId("table2");
oModel.setData({ modelData: tableArr });
oTable.setModel(oModel);
oTable.bindRows("/modelData");
oDialog1.close();
}.bind(this)
}),
endButton: new Button({
text: "Close",
press: function() {
this.pressDialog.close();
}.bind(this)
})
});
oDialog1.open();
},
any guiding links or a solution would be much helpful , TIA

The binding for the dialog is missing. Add the dialog as "dependent" on the view to be connected to the view’s model lifecycle. Or try to bind the element like this oDialog.bindElement(sPath).
Try sth. like oDialog1.bindElement(oItemPath) before opening the dialog.

How do I achieve the same thing with sap.m.CustomListItem in JS View?

I would like to list down all the information like in the sap.m.ObjectListItem but with sap.m.CustomListItem, see the screenshot attached. How do I achieve that? any working example?
This is what I have done so far, still a long way to go:
var oListTemplate = new sap.m.CustomListItem({
content: [
new sap.m.VBox({
items: [
new sap.m.Text({
text: "{nct_id}"
}),
new sap.m.HBox({
justifyContent: "SpaceBetween",
items: [
new sap.m.Label({
textAlign: sap.ui.core.TextAlign.Left,
text: "{title}",
}).addStyleClass("Text_Big font_bold"),
new sap.m.FormattedText({
textAlign: sap.ui.core.TextAlign.Right,
htmlText: "{condition_summary}"
}),
]
}).addStyleClass("sapUiTinyMargin")
]
}).addStyleClass("sapUiTinyMargin"),
],
type: sap.m.ListType.Active,
press: function() {
alert("Clicked the list item");
}

Here is what you are looking for, hope this help you.
As #Erch suggested better to use XML view.
JS
var oListTemplate = new sap.m.CustomListItem({
content: [
new sap.m.HBox({
items: [
new sap.m.FlexBox({
items: [
new sap.m.VBox({
width: "80%",
items: [
new sap.m.ObjectIdentifier({ title: "", text: "", titleActive: "false" }),
new sap.m.Label({ text: "" }),
new sap.m.Label({ text: "" })
],
layoutData: new sap.m.FlexItemData({ growFactor: 3 })
})
new sap.m.VBox({
width: "100px",
items: [
new sap.m.Label({ text: "" }),
new sap.m.Label({ text: "" }),
new sap.m.ObjectStatus({ text: "", state: "Success" })
],
layoutData: new sap.m.FlexItemData({ growFactor: 1 })
})
],
width: "100%",
alignItems: "Start"
})
],
width: "100%",
fitContainer: "true"
}).addStyleClass("sapUiTinyMargin"),
],
type: sap.m.ListType.Active,
press: function() {
alert("Clicked the list item");
})
}
XML
<List>
<items>
<CustomListItem>
<HBox width="100%" fitContainer="true">
<FlexBox width="100%" alignItems="Start" class="sapUiTinyMargin">
<items>
<VBox width="80%">
<ObjectIdentifier title="" text="" titleActive="false" />
<Label text="" />
<Label text="" />
<layoutData>
<FlexItemData growFactor="3" />
</layoutData>
</VBox>
<VBox width="100px" class="sapUiTinyMarginBegin">
<items>
<Label text="" />
<Label text="" />
<ObjectStatus text="Product Shipped" state="Success" />
</items>
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</VBox>
</items>
</FlexBox>
</HBox>
</CustomListItem>
</items>
</List>

SAPUI5 Fiori Smart Table and Other Controls in Same Page

I would like to know that, can I have a Smart Table (With Smart Filter Bar) along with other Fiori controls such as Planning Calendar, Grant Chart or Another Responsive Table within the same page.
Since Page which contains a Smart Table must contain the table's oData service in the page default model, can we have custom UI codes & models for other controls .
Sample Screen

I don't see why that could be a problem. I created a quick UI5 application with both a sap.ui.comp.smarttable.SmartTable and a sap.m.PlanningCalendar.
Btw, I started off with the first Smart Table sample.
Hope this helps.
View
<mvc:View xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable"
xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:unified="sap.ui.unified"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" controllerName="sap.ui.comp.sample.smarttable.SmartTable"
height="100%">
<App>
<pages>
<Page title="Title">
<content>
<VBox fitContainer="false">
<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="LineItemsSet" persistencyKey="SmartFilter_Explored"
basicSearchFieldName="Bukrs" enableBasicSearch="true">
<smartFilterBar:controlConfiguration>
<smartFilterBar:ControlConfiguration key="Bukrs">
<smartFilterBar:defaultFilterValues>
<smartFilterBar:SelectOption low="0001"></smartFilterBar:SelectOption>
</smartFilterBar:defaultFilterValues>
</smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="Gjahr">
<smartFilterBar:defaultFilterValues>
<smartFilterBar:SelectOption low="2014"></smartFilterBar:SelectOption>
</smartFilterBar:defaultFilterValues>
</smartFilterBar:ControlConfiguration>
</smartFilterBar:controlConfiguration>
<!-- layout data used to make the table growing but the filter bar fixed -->
<smartFilterBar:layoutData>
<FlexItemData shrinkFactor="0"/>
</smartFilterBar:layoutData>
</smartFilterBar:SmartFilterBar>
<smartTable:SmartTable id="LineItemsSmartTable" entitySet="LineItemsSet" smartFilterId="smartFilterBar" tableType="Table"
useExportToExcel="true" beforeExport="onBeforeExport" useVariantManagement="false" useTablePersonalisation="true" header="Line Items"
showRowCount="true" persistencyKey="SmartTableAnalytical_Explored" enableAutoBinding="true" app:useSmartField="true"
class="sapUiResponsiveContentPadding">
<!-- layout data used to make the table growing but the filter bar fixed -->
<smartTable:layoutData>
<FlexItemData growFactor="1" baseSize="0%"/>
</smartTable:layoutData>
</smartTable:SmartTable>
</VBox>
<PlanningCalendar id="PC1" rows="{path: '/people'}" appointmentsVisualization="Filled" groupAppointmentsMode="expanded"
appointmentsReducedHeight="true" appointmentSelect="onClickAssignment" showEmptyIntervalHeaders="false" viewChange="onStartDateChange"
startDateChange="onStartDateChange" rowSelectionChange="onResourceSelectedInCalendar" rowHeaderClick="onRowHeaderClick"
intervalSelect="onIntervalSelect" class="calendarMarginBottom">
<toolbarContent>
<Title text="Calendar" titleStyle="H4"/>
<ToolbarSpacer/>
</toolbarContent>
<rows>
<PlanningCalendarRow id="PCR1" icon="{pic}" title="{name}" text="{role}" key="{key}"
appointments="{path : 'appointments', templateShareable: 'true'}" intervalHeaders="{path: 'headers', templateShareable: 'true'}">
<appointments>
<unified:CalendarAppointment id="MCA1" startDate="{start}" endDate="{end}" icon="{icon}" title="{title}" text="{info}" type="{type}"
tentative="{tentative}" hover="onAppointmentHover"/>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{icon}" title="{title}" type="{type}"></unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
</content>
</Page>
</pages>
</App>
Controller
sap.ui.controller("sap.ui.comp.sample.smarttable.SmartTable", {
onInit: function() {
this.fillSmartTable();
this.fillCalendar();
},
//
// CALENDAR
//
fillCalendar: function() {
// create model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
startDate: new Date("2017", "0", "15", "8", "0"),
people: [{
pic: "sap-icon://employee",
name: "Max Mustermann",
role: "team member",
appointments: [{
start: new Date("2018", "6", "26", "08", "30"),
end: new Date("2018", "6", "26", "09", "30"),
title: "Meet John Miller",
type: "Type02",
tentative: false
},{
start: new Date("2018", "6", "26", "11", "30"),
end: new Date("2018", "6", "26", "13", "30"),
title: "New quarter",
type: "Type10",
tentative: false
}],
headers: [{
start: new Date("2018", "6", "26", "14", "30"),
end: new Date("2018", "6", "26", "16", "30"),
title: "Private",
type: "Type05"
}]
}]
});
this.byId("PC1").setModel(oModel);
},
handleAppointmentSelect: function(oEvent) {
var oAppointment = oEvent.getParameter("appointment"),
sSelected;
if (oAppointment) {
sSelected = oAppointment.getSelected() ? "selected" : "deselected";
sap.m.MessageBox.show("'" + oAppointment.getTitle() + "' " + sSelected + ". \n Selected appointments: " + this.byId("PC1").getSelectedAppointments()
.length);
} else {
var aAppointments = oEvent.getParameter("appointments");
var sValue = aAppointments.length + " Appointments selected";
sap.m.MessageBox.show(sValue);
}
},
handleSelectionFinish: function(oEvent) {
var aSelectedKeys = oEvent.getSource().getSelectedKeys();
this.byId("PC1").setBuiltInViews(aSelectedKeys);
},
//
// SMART TABLE
//
fillSmartTable: function() {
var oModel, oView;
jQuery.sap.require("sap.ui.core.util.MockServer");
var oMockServer = new sap.ui.core.util.MockServer({
rootUri: "sapuicompsmarttable/"
});
this._oMockServer = oMockServer;
oMockServer.simulate("https://sapui5.hana.ondemand.com/test-resources/sap/ui/comp/demokit/sample/smarttable/mockserver/metadata.xml",
"https://sapui5.hana.ondemand.com/test-resources/sap/ui/comp/demokit/sample/smarttable/mockserver/");
oMockServer.start();
oModel = new sap.ui.model.odata.ODataModel("sapuicompsmarttable", true);
oModel.setCountSupported(false);
oView = this.getView();
oView.setModel(oModel);
},
onBeforeExport: function(oEvt) {
var mExcelSettings = oEvt.getParameter("exportSettings");
// GW export
if (mExcelSettings.url) {
return;
}
// For UI5 Client Export --> The settings contains sap.ui.export.SpreadSheet relevant settings that be used to modify the output of excel
// Disable Worker as Mockserver is used in explored --> Do not use this for real applications!
mExcelSettings.worker = false;
},
onExit: function() {
this._oMockServer.stop();
}
});

Transfer Data from an Calendar Row to a TextBox

I'm using PlanningCalendar App to show the workers schedule.
But what I also need is, after I click on the worker (for example 'Carlos Pinho') his data (name and role) appear on the TextBox from the SimpleForm (red arrow)
Controller:
sap.ui.define([
'jquery.sap.global',
'sap/m/StandardListItem',
'sap/m/MessageToast',
'sap/ui/core/mvc/Controller',
'sap/m/Label',
'sap/m/Text',
'sap/m/TextArea',
'sap/ui/model/json/JSONModel'], function(jQuery, StandardListItem, MessageToast, Controller, Label, Text, TextArea, JSONModel) {
"use strict";
return Controller.extend("zapp_rej_absence.controller.Main", {
onInit: function() {
//this.getView().byId() //Para definir o que aparece na combo box
// create model
var oModel = new JSONModel();
oModel.setData({
startDate: new Date("2017", "4", "26", "8", "0"),
people: [{
pic: "sap-icon://employee", //Foto do Funcionario
name: "Carlos Pinho", //Nome do Funcionario
role: "Logística", //Area do Funcionario
appointments: [{
start: new Date("2017", "4", "29", "12", "0"), //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
end: new Date("2017", "4", "29", "14", "0"),
title: "Reunião de Equipa",
info: "Sala A06",
type: "Type01", //Cor do Evento
pic: "sap-icon://manager",
tentative: false
}, {
start: new Date("2017", "5", "10", "0", "0"), //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
end: new Date("2017", "5", "16", "23", "59"),
title: "Férias",
info: "Maldivas",
pic: "sap-icon://flight",
type: "Type04", //Cor do Evento
tentative: false
}],
headers: [{
start: new Date("2017", "4", "29", "08", "0"), //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
end: new Date("2017", "4", "29", "10", "0"),
title: "Privado",
type: "Type05"
}]
}, {
pic: "sap-icon://employee", //Foto do Funcionario
name: "Joaquim Agostinho", //Nome do Funcionario
role: "Financeira", //Area do Funcionario
appointments: [{
start: new Date("2017", "4", "29", "08", "30"), //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
end: new Date("2017", "4", "29", "09", "30"),
title: "Reunião",
pic: "sap-icon://world",
type: "Type02", //Cor do Evento
tentative: false
}, {
start: new Date("2017", "4", "30", "10", "0"), //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
end: new Date("2017", "4", "30", "12", "0"),
title: "Reunião de Equipa",
info: "Sala 1",
type: "Type01", //Cor do Evento
pic: "sap-icon://manager",
tentative: false
}, {
start: new Date("2017", "4", "30", "12", "30"), //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
end: new Date("2017", "4", "30", "13", "30"),
title: "Almoço",
type: "Type03", //Cor do Evento
pic: "sap-icon://meal",
tentative: true
}],
headers: [{
start: new Date("2017", "4", "29", "8", "0"), //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
end: new Date("2017", "4", "29", "10", "0"),
title: "Lembrete",
type: "Type06" //Cor do Evento
}]
}]
});
this.getView().setModel(oModel);
},
//Dialog do botão aceitar
onMessageSuccessDialogPress: function(oEvent) {
var dialog = new Dialog({
title: 'Successo',
type: 'Message',
state: 'Success',
content: new Text({
text: "Foi aprovado com sucesso."
}),
beginButton: new Button({
text: 'OK',
press: function() {
MessageToast.show('Pedido Aprovado');
dialog.close();
}
}),
afterClose: function() {
dialog.destroy();
}
});
dialog.open();
},
onMessageWarningDialogPress: function(oEvent) {
var dialog = new Dialog({
title: 'Aviso',
type: 'Message',
state: 'Warning',
content: new Text({
text: 'Tem a certeza que quer rejeitar este pedido?'
}),
beginButton: new Button({
text: 'Sim',
press: function() {
dialog.close();
var dialog1 = new Dialog({
title: 'Confirmação',
type: 'Message',
content: [
new Label({
text: 'Tem a certeza que pretende rejeitar o pedido?',
labelFor: 'submitDialogTextarea'
}),
new TextArea('submitDialogTextarea', {
liveChange: function(oEvent) {
var sText = oEvent.getParameter('value');
var parent = oEvent.getSource().getParent();
parent.getBeginButton().setEnabled(sText.length > 0);
},
width: '100%',
placeholder: 'Adicionar nota (obrigatória)'
})
],
beginButton: new Button({
text: 'Submit',
enabled: false,
press: function() {
MessageToast.show('Pedido Rejeitado');
dialog1.close();
}
}),
endButton: new Button({
text: 'Cancel',
press: function() {
dialog1.close();
}
}),
afterClose: function() {
dialog1.destroy();
}
});
dialog1.open();
}
}),
endButton: new Button({
text: 'Não',
press: function() {
dialog.close();
}
}),
afterClose: function() {
dialog.destroy();
}
});
dialog.open();
},
onSubmitDialog: function() {
var dialog = new Dialog({
title: 'Confirm',
type: 'Message',
content: [
new Label({
text: 'Are you sure you want to submit your shopping cart?',
labelFor: 'submitDialogTextarea'
}),
new TextArea('submitDialogTextarea', {
liveChange: function(oEvent) {
var sText = oEvent.getParameter('value');
var parent = oEvent.getSource().getParent();
parent.getBeginButton().setEnabled(sText.length > 0);
},
width: '100%',
placeholder: 'Add note (required)'
})
],
beginButton: new Button({
text: 'Submit',
enabled: false,
press: function() {
var sText = sap.ui.getCore().byId('submitDialogTextarea').getValue();
MessageToast.show('Note is: ' + sText);
dialog.close();
}
}),
endButton: new Button({
text: 'Cancel',
press: function() {
dialog.close();
}
}),
afterClose: function() {
dialog.destroy();
}
});
dialog.open();
},
onMessageDialogPress: function(oEvent) {
var dialog = new Dialog({
title: 'Meses Aprovados',
icon: 'sap-icon://calendar',
type: 'Message',
content: new Text({
text: 'A ideia é aparecer os meses todos em RadioButtons'
}),
beginButton: new Button({
text: 'OK',
press: function() {
dialog.close();
}
}),
endButton: new Button({
text: 'Cancelar',
press: function() {
dialog.close();
}
}),
afterClose: function() {
dialog.destroy();
}
});
dialog.open();
},
handlePopoverPress: function(oEvent) {
// create popover
if (!this._oPopover) {
this._oPopover = sap.ui.xmlfragment("zapp_rej_absence.view.Popover", this);
this.getView().addDependent(this._oPopover);
this._oPopover.bindElement("/ProductCollection/0");
}
// delay because addDependent will do a async rerendering and the actionSheet will immediately close without it.
var oButton = oEvent.getSource();
jQuery.sap.delayedCall(0, this, function() {
this._oPopover.openBy(oButton);
});
},
//---------------------------------------------------------Eventos
handleAppointmentSelect: function(oEvent) {
var oAppointment = oEvent.getParameter("appointment"); //Selecçao do Evento
if (oAppointment) {
alert("Evento Selecionado: " + oAppointment.getTitle());
} else {
var aAppointments = oEvent.getParameter("appointments");
var sValue = aAppointments.length + " Eventos Selecionados";
alert(sValue);
}
}
}); });
XML:
<mvc:View controllerName="zapp_rej_absence.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" displayBlock="true" xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc" xmlns:unified="sap.ui.unified" xmlns:f="sap.ui.layout.form">
<Page title="Aprovação de Férias/Ausências" enableScrolling="true">
<Panel class="sapUiSmallMargin" width="auto">
<PlanningCalendar id="PC1" startDate="{path: '/startDate'}" rows="{path: '/people'}" appointmentsVisualization="Filled"
appointmentSelect="handleAppointmentSelect" showEmptyIntervalHeaders="false" viewKey="One Month">
<toolbarContent>
<Title text="Calendário" titleStyle="H4"/>
<ToolbarSpacer/>
<SearchField width="300px" placeholder="Procurar..."/>
<Button icon="sap-icon://legend" press="handlePopoverPress"/>
</toolbarContent>
<rows>
<PlanningCalendarRow icon="{pic}" title="{name}" text="{role}" appointments="{appointments}" intervalHeaders="{headers}">
<appointments>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{pic}" title="{title}" text="{info}" type="{type}"
tentative="{tentative}"></unified:CalendarAppointment>
</appointments>
<intervalHeaders>
<unified:CalendarAppointment startDate="{start}" endDate="{end}" icon="{pic}" title="{title}" type="{type}"></unified:CalendarAppointment>
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>
<f:SimpleForm id="SimpleFormDisplay354" class="sapUiLargeMarginTop" width="auto" editable="false" layout="ResponsiveGridLayout"
title="Informações do Colaborador" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4"
emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false">
<f:content>
<Label text="Nome" width="100%" design="Bold"/>
<Text text="{Name}" width="100%"/>
<!--Depois ir buscar estes dados à BD-->
<Label text="Equipa" width="100%" design="Bold"/>
<Text text="{Street} {HouseNumber}" width="100%"/>
<!--Depois ir buscar estes dados à BD-->
<Label text="Total de Férias" width="100%" design="Bold"/>
<Text text="{ZIPCode} {City}" width="100%"/>
<!--Depois ir buscar estes dados à BD-->
<Label text="Country" width="100%" design="Bold"/>
<Text text="{Country}" width="100%"/><!--Depois ir buscar estes dados à BD--></f:content>
</f:SimpleForm>
</Panel>
<footer>
<Toolbar>
<Button icon="sap-icon://past" text="Meses Aprovados" type="Emphasized" press="onMessageDialogPress"/>
<ToolbarSpacer/>
<Button icon="sap-icon://accept" text="Aprovar" type="Accept" press="onMessageSuccessDialogPress"/>
<Button icon="sap-icon://sys-cancel-2" text="Rejeitar" type="Reject" press="onMessageWarningDialogPress" />
</Toolbar>
</footer>
</Page>
Thanks in advance for your help.

I used the binding context of selected row and bound it to the form below and it worked.
Below is the working code and steps:
Add "Row Selection Event" to planning calender.
<PlanningCalendar id="PC1" startDate="{path: '/startDate'}" rows="{path: '/people'}"
appointmentsVisualization="Filled"
appointmentSelect="handleAppointmentSelect" showEmptyIntervalHeaders="false" viewKey="One Month"
rowSelectionChange="onRowSelection">
Step 2: Find the binding Context of selected row and bind it to the form:
onRowSelection: function(oEvent) {
var oForm = this.byId('SimpleFormDisplay354');
var oBindingContext = oEvent.getSource().getSelectedRows()[0].getBindingContext();
oForm.setBindingContext(oBindingContext);
}
Step 3: Bind correct Properties in the form:
<f:SimpleForm id="SimpleFormDisplay354" class="sapUiLargeMarginTop" width="auto" editable="false" layout="ResponsiveGridLayout"
title="Informações do Colaborador" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4"
emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false">
<f:content>
<Label text="Nome" width="100%" design="Bold"/>
<Text text="{name}" width="100%"/>
<!--Depois ir buscar estes dados à BD-->
<Label text="Role" width="100%" design="Bold"/>
<Text text="{role}" width="100%"/>
</f:content>
</f:SimpleForm>
Let me know if this works for you.