Hi experts,
I create a css file with some css class,and declare it like this in index.html
<link rel="stylesheet" type="text/css" href="css/style.css">
local test is ok,but When I created a tile in launchpad with semantic, The app can't apply css,because it doesn't open via index.html,it open directly via component.js,so How to load css file in component.js or other solution?
Hi,
I am trying to redeploy an application(Template-BUILD) from my webIDE to the HCP and I am not seeing the changes getting updated in HCP.
A little background,
I imported a BUILD project into WebIDE and deployed it to HCP without any problem. I wanted to remove a column from a table in my app. I made the necessary changes to the view.xml in WebIDE. Deleted the existing app in HCP and deployed the changed app from WebIDE. But I still see the original application when I click on the link in HCP.
I tried everything from deleting the app from HCP and WebIDE and starting from scratch with no change in result. Tried this a few times over and over sometimes renaming the application etc. I wonder if the HCP has a cache which is not getting updated.
When I run the application in WebIDE as ' run as web application', this is what I see,
But when I click on the application link in HCP link, the original table column is still getting displayed.
I do not understand where it picks the first column from because I do not see it in the code nor in the layout editor
.
I have no prior experience with web applications and am trying all this out for the Fiori openSAP course develop challenge
Benedict
dear all,
I am creating an simple ui5 app, with 2 pages using the mvc paradigm..But somehow I cant seem to be able to create contents in the Mobile pages
e.g. i have written this in the first page
sap.ui.jsview("abc.Initial", {
getControllerName : function() {
return "abc.Initial";
},
createContent : function(oController) {
return new sap.m.Page({
title: "UI5 First Page",
content: (new sap.m.Button({
text:"Go to Page2",
tap: function(){
//app.to("abc.SecondPage");
alert("Hello");
}
})
) }); }});
while testing the app in Chrome browser with user agent set as Ipad/iphone - the content is not created as shown in the screen shot..
I even created one more page, with some content but same issue..No content is generated..
sap.ui.jsview("abc.SecondPage", {
getControllerName : function() {
return "abc.SecondPage";
},
createContent : function(oController) {
return new sap.m.Page({
title: "UI5 Mobile Second page",
showNavButton: true,
navButtonTap: function(){
app.back(); // when tapped, the back button should navigate back up to page 1
},
icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",
content : new sap.m.Text({text:"Hello Mobile World!"})
});
}
});
Did I miss something? Anything else to be done so that the Ui5 content is generated
Appreciate your help
Regards, Sandip
I am new to UI5 and Odata model. I am able to bind table to odata. But, I got stuck in how to bind my table data to the odata entity association?
It is showing empty deferred objects.
Getting Started |
SAP Web IDE is an extensible development environment with a growing set of embedded tools covering the end-to-end development process. It lets you rapidly design, build, and deploy Fiori-like web applications based on SAPUI5.
SAP Web IDE allows developers to collaborate with business experts and designers to fulfill end-users requirements and expectations more effectively.
You can access SAP Web IDE from the SAP HANA Cloud Platformwebsite - free of charge! The Getting Started documentation will guide you through your first steps.
SAP Web IDE Licensing
Wondering what's new in SAP Web IDE? |
Getting Started with SAP Web IDE |
SAP Web IDE prerequisite: HCP account
https://account.hanatrial.ondemand.com
-> logon with your SCN user -> Services -> SAP Web IDE -> Open SAP Web IDE (bookmark this URL).
Getting started with SAP Web IDE
Tutorial Video
Troubleshooting |
How to Guides for SAP Web IDE Release 1.17: |
Local Installation for Trial |
How to guides
How to guides up to release 1.4
| How-To Guide (Windows)How-To Guide (Mac) |
|
DJ Adams demos how to install SAP Web IDE locally |
Prototyping |
Additional Resources for SAP Web IDE |
SCN
SAPUI5
SAP HANA Academy
People to Follow |
Marc Anderegg , Jennifer Cha, Jamie Cawley, Keren Rotenberg, Simmaco Ferriero, Chris Whealy
| Brought to you by the SAP Technology RIG |
Hi, I was debugging my SAPUI5 application, since our customer is experiencing some long loading period of the App. I noticed that some library files are loaded many many times. The mentioned files are: library-preload.json, library-parameters.json and library.css.
Below is the Network tab results recorded in IE Dev Mode.
Similar is happening with library-parameters.json and library.css.
Why is this happening?
Is there a way to reduce the calls for those files?
I am very glad for your feedback and possible improvement suggestions. Will provide additional details regarding my App if needed
Hi All
I am getting the following error while deploying an UI5 Application to ABAP repository
Cannot deploy application zwo_approval: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML dir=ltr><HEAD><TITLE>The page cannot be displayed</TITLE>
<STYLE id=L_defaultr_1>A:link {
FONT: 8pt/11pt verdana; COLOR: #ff0000
}
A:visited {
FONT: 8pt/11pt verdana; COLOR: #4e4e4e
}
</STYLE>
<P id=L_defaultr_11>Technical Information (for support personnel)</P>
<UL>
<LI id=L_defaultr_12>Error Code: 500 Internal Server Error. The request was rejected by the HTTP filter. Contact the server administrator. (12217)
</UL></FONT></TD></TR></TBODY></TABLE></BODY></HTML>
Has anyone faced similar issues before??
Regards
Sandip
// Create JSON data model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
hardware:[
{id:1,device:"PC", enabled:true,type:1},
{{id:2,device:"Monitor", enabled:true,type:1},
{{id:3,device:"Keyboard", enabled:false,type:1},
{{id:4,device:"Mouse", enabled:true,type:2},
{{id:5,device:"Speaker", enabled:false,type:2},
{{id:6,device:"Printer", enabled:true,type:3}],
editable: true,
tooltip: "Device"});
sap.ui.getCore().setModel(oModel);
// Create a DropdownBox
var oDropdownBox3 = new sap.ui.commons.DropdownBox("DropdownBox3");
oDropdownBox3.bindProperty("tooltip", "/tooltip");
oDropdownBox3.bindProperty("editable", "/editable");
oDropdownBox3.setModel(oModel);
var oItemTemplate1 = new sap.ui.core.ListItem();
oItemTemplate1.bindProperty("text", "device");
oItemTemplate1.bindProperty("key", "id");
oItemTemplate1.bindProperty("enabled", "enabled");
oDropdownBox3.bindItems("/hardware", oItemTemplate1);
oDropdownBox3.attachChange(function(){
//*************************************
// On Change I can able get selected KEY and value which is binded in ListItem
//My Problem is how to get entire object which is selected
//***************************************
});
// Attach the DropdownBox to the page
oDropdownBox3.placeAt("sample3");I want to get Selected Object onChange. Please Help me on that
I am fine to get a value of cells in first page.
but i have error when i get a value of cells in second page.
this is controller.js
checkStatus: function(oEvent) {
var rowIndex = oEvent.getParameter("rowIndex");
console.log(rowIndex);
var oTable = this.byId("menuTable");
console.log(oTable.getRows()[rowIndex].getCells()[0].getChecked());
},
xml.view
<t:Table id = "menuTable" class = "textSpace" rows = "{rightdata>/AUCLS_MENUSet/results}" cellClick = "checkStatus"
enableSelectAll = "false" navigationMode = "Paginator" width = "700px"
visibleRowCount = "16" selectionMode = "None" >
<t:Column autoResizeable = "true" width = "5%">
<t:template><c:CheckBox checked = "{rightdata>VALID}" /></t:template>
</t:Column>
<t:Column autoResizeable = "true">
<Label text = "MENU TYPE" />
<t:template><c:TextField value = "{rightdata>MENCT_T}" /></t:template>
</t:Column>
<t:Column autoResizeable = "true">
<Label text = "MENU" />
<t:template><c:TextField value = "{rightdata>MTEXT}" /></t:template>
</t:Column>
</t:Table>
this is error message
how can i get cell value not in first page.
Hi,
In my SAPUI5 application i am trying to create a record in backend SAP system via NW Gateway system. For this my client is using SMP3.0 SP05 as a middle-ware server through Relay server configured. First i tried using REST Client, & i am able to create it successfully after getting the X-CSRF-Token. But when i am using ODataModel.create method to create the entry, i am getting forbidden error(403). Please check my below code:-
onPressSubmit:function(){ var newUrl = ""; newUrl = sap.app.config.smpUrl + sap.app.config.CreateActivity; jQuery.sap.require("sap.ui.model.odata.ODataModel"); $(function(){ mHeaders = { "X-Requested-With" : "XMLHttpRequest", "Content-Type" : "application/atom+xml", "DataServiceVersion" : "2.0", "X-CSRF-Token" : "Fetch", "X-SMP-APPCID": appCID, "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS", "Access-Control-Allow-Headers": "Origin, Content-Type, Authorization, Accept, X-Request-With", "Access-Control-Allow-Credentials": "true" }; this.createActivityModel = new sap.ui.model.odata.ODataModel(newUrl, false, "username", "password",mHeaders); this.createActivityModel.attachRequestFailed(function(evt) { alert("Server error: " + evt.getParameter("message") + " - " + evt.getParameter("statusText")); }); this.createActivityModel.setHeaders( { "X-Requested-With": "XMLHttpRequest", "Content-Type": "application/atom+xml", "DataServiceVersion": "2.0", "X-CSRF-Token":"Fetch", "X-SMP-APPCID": appCID, "Access-Control-Allow-Origin": "http://localhost", "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE", "Access-Control-Allow-Headers": "Content-Type" }); jQuery.sap.log.debug(this.createActivityModel); oCore = sap.ui.getCore().setModel(this.createActivityModel); var oEntry = {}; oEntry.DeviceType = sap.app.config.deviceType; /*this.createActivityModel.setHeaders({ "X-REQUESTED-WITH": "XMLHttpRequest", });*/ var oEntry={ "IvDescription":"Test by UI Team", "IvStartDt":"2016-03-07T00:00:00", "IvEndDt":"2016-03-07T00:00:00", "IvStartTime":"100000", "IvEndTime":"", "IvStatus":"E0001", "IvCategory":"IvActivityType", "Text":"Test team UI", address:[ { "PartnerName":"", "PartnerFct":"00000009", "PartnerId":"7000011183" }, { "PartnerName":"", "PartnerFct":"ZSEESP1", "PartnerId":"EM00700112" }, ], }; //this.createActivityModel.create("/AppointmentCreateStdSet",oEntry,{success: this.mySuccessHandler, error: this.myErrorHandler}); this.createActivityModel.create("/AppointmentCreateStdSet",oEntry,null, function doSaveLunchData_OnSuccess(oData, response) { alert(" doSaveLunchData_OnSuccess()"); logSaveData = oData.results; }, function doSaveLunchData_OnError(oError) { alert(" doSaveLunchData_OnError()"); alert("error: "+oError); } ); }); var router = sap.ui.core.UIComponent.getRouterFor(this); router.navTo("newActivity", null, false);//navigation to the newActivity page using router }, Please check the response i got below:-
Please suggest.
Thanks,
Shrikant.
Hello friends,
I have a number of issues with UI5 app that I'm developing. When run it from Eclipse on localhost it works fast on desktop browser and there is no problems at all. Now, my first question is, where to deploy application when it's finished, production ready? We have separate ABAP 7.4 server with Gateway and SAPUI5 version 1.28. On that Gateway server are all oData services for communication with ERP systems in backend (Development and Production). I have planed to deploy finished application on Gateway and use JavaScript resources from there (now in bootstrap as src is: https://sapui5.hana.ondemand.com/resources/sap-ui-cachebuster/sap-ui-core.js)
But when I deployed application on Gateway and test it, on desktop it works almost ok but on mobile phones, Android, it is very slow. I try with resources from above link and with resources from Gateway (by the way, with Gateway libraries some icons are missing..). Is there other solution, like a separate server just for application, and what is the best practice? Should we update SAPUI5 component on Gateway server to version 1.34 because that is the version from Eclipse that I developed with?
Second question is how good is that one application that was mainly built with sap.m libraries be desktop and mobile version, or is better to build separate version for desktop and mobile. For example: List component have three event for item select - "select" which is deprecated from 1.16 and don't work on Android phones, "selectionChange" and "itemPress" - which one of these two last should use? Master detail template on phone is very slow and don't work as expected, but I still developing so it may become better later. I just need some guides on how to develop fully responsive mobile and desktop application that work fast so every advice is welcome and will be rewarded.
Third, can someone explain me what this means in device model:
| listMode : sap.ui.Device.system.phone ? "None" : "SingleSelectMaster", | ||
| listItemType : sap.ui.Device.system.phone ? "Active" : "Inactive" |
Thanks, will have more questions soon..
This one might require more detail, but here is my problem:
I have a JSONModel called "DS" that I use in my application. The JSON for this simplified example is like this:
{
colorTest : "#009966",
palette : ["#009966","#006699","#C0C0C0"]
}Note: there are more properties than this, but this is a simple example.
I have created two custom UI5 controls that are used in a sap.m.InputListItem to facilitate color selection. The first handles a single color property (colorTest) and the second handles an array of colors (palette).
Example for single color picker:
Example for Palette Color Picker:
My first component works just fine. I can select a color in the Popover's Color Picker and the bindings flow back to the model just fine and the main view updates as it should. For example, I pick purple, and everything is fine:
When I do the same with the palette component, the list of colors update, but the title of the PopOver with the list of colors in Hex does not update, nor does its palette button in the backdrop:
EDIT: I should add a comment to this image. The portions in RED are not updating, however, the "DS" Model *is* getting updated. I can actually refesh the page/click on the palette button selector again, the pieces in red then show the correct color. This seems specific to the properties of the controls(s) at play here....
I'm a bit confused as to what I am doing wrong. Below is the code for my single Color Picker component (quite crude, but it seems to work fine):
sap.ui.define([ "sap/ui/commons/ColorPicker", "sap/m/Button", "PropertyPage/DesignStudio/HexColorPicker"], function (ColorPicker,Button,HexColorPicker) { "use strict"; return Button.extend("PropertyPage.DesignStudio.ColorPicker",{ metadata : { properties : { colorString : { type : "string", defaultValue : "#000000" }, width : { type : "sap.ui.core.CSSSize", defaultValue : "75px" } }, aggregations : { popover : { type : "sap.m.Popover", multiple : false } } }, pressHandler : function(oEvent){ var popover = this.getPopover(); try{ var path = this.getBindingContext("DS").getPath() + "/" + this.getBindingPath("colorString"); // Bind Title Property to path var cp = popover.getContent()[0]; popover.bindProperty("title",{ path : "DS>" + this.getBindingPath("colorString") }); cp.bindProperty("colorString",{ path : "DS>" + this.getBindingPath("colorString") }); this._oldValue = this.getModel("DS").getProperty(path); }catch(e){ alert(e); } popover.openBy(this); }, acceptColor : function(oEvent){ this.getAggregation("popover").close(); }, rejectColor : function(oEvent){ try{ this.getAggregation("popover").close(); var path = this.getBindingContext("DS").getPath() + "/" + this.getBindingPath("colorString"); this.getModel("DS").setProperty(path, this._oldValue); }catch(e){ alert(e); } }, init : function() { try{ //var _po = sap.ui.xmlfragment("PropertyPage.DesignStudio.ColorPickerPopover",this); -- This won't work for me var ok = new sap.m.Button({text : "OK"}); ok.attachPress(this.acceptColor,this); var cancel = new sap.m.Button({text : "Cancel"}) cancel.attachPress(this.rejectColor,this); var _po = new sap.m.Popover({ title : "{DS>colorString}", placement : "Bottom", footer : [new sap.m.Toolbar({content:[new sap.m.ToolbarSpacer(), ok, cancel ]})], content : [new HexColorPicker()] }); this.setPopover(_po); }catch(e){ alert(e); } this.attachPress(this.pressHandler); } });
});Ths components are loaded via a MVC XMLView (snippet here):
<InputListItem label="Color Test"> <a:ColorPicker colorString="{DS>colorTest}" text="{DS>colorTest}"/></InputListItem><InputListItem label="Color Palette Test"> <a:ColorPalette palette="{DS>palette}"/></InputListItem>Here is the color palette component that I am having the problem with:
sap.ui.define([ "PropertyPage/DesignStudio/ColorPicker", "sap/m/Button"], function (ColorPicker,Button) { "use strict"; return Button.extend("PropertyPage.DesignStudio.ColorPalette",{ //renderer : { }, metadata : { properties : { palette : { type : "string[]", defaultValue : [] } }, aggregations : { popover : { type : "sap.m.Popover", multiple : false } } }, addColor : function(oEvent){ try{ var model = this.getModel("DS"); var content = model.getProperty(this.getBindingContext("DS").getPath()+"/" + this.getBindingPath("palette")) || []; content.push("#000000"); model.setProperty(this.getBindingContext("DS").getPath()+"/" + this.getBindingPath("palette"), content); }catch(e){ alert(e); } }, deleteColor : function(oEvent){ var oList = oEvent.getSource(); var oItem = oEvent.getParameter("listItem"); var index = oItem.getParent().indexOfItem(oItem); var model = this.getModel("DS"); var content = model.getProperty(this.getBindingContext("DS").getPath()+"/" + this.getBindingPath("palette")) || []; content.splice(index,1); model.setProperty(this.getBindingContext("DS").getPath()+"/" + this.getBindingPath("palette"), content); }, pressHandler : function(oEvent){ var popover = this.getPopover(); try{ popover.bindProperty("title",{ path : "DS>" + this.getBindingPath("palette") }); var list = this.getPopover().getContent()[0]; list.bindAggregation("items",{ path : "DS>" + this.getBindingPath("palette"), factory : function(sId, oContext){ try{ var color = oContext.getProperty(""); var colorPicker = new ColorPicker({ text : "{DS>}", colorString : "{DS>}" }); var item = new sap.m.InputListItem({ content : colorPicker, label : "{DS>}" }); }catch(e){ alert(e); } return item; } }); }catch(e){ alert("Error with Palette:" + e); } this.getPopover().openBy(this); }, init : function() { this.attachPress(this.pressHandler); var add = new sap.m.Button({icon:"sap-icon://add"}); add.attachPress(this.addColor,this); var list = new sap.m.List({ mode : "Delete" }); list.attachDelete(this.deleteColor, this); var _po = new sap.m.Popover({ title : "{DS>palette}", placement : "Bottom", contentWidth : "320px", footer : [new sap.m.Toolbar({ content : [add] })], /*footer : [new sap.m.Toolbar({content:[new sap.m.ToolbarSpacer(), ok, cancel ]})],*/ content : [list] }); this.setPopover(_po); } });
});Any suggestions of what I am missing or what could cause this binding to not update its parent view (but oddly updates its popover list labels) would be greatly appreciated. I'm only recently trying to use models and bindings so I may not be approaching this in the best way possible, so any feedback would be great.
Thanks!
Hi,
I am using tree table to show hierarchical data. while loading bulk data into tree table,the browser is crashing.
So I planned to use threshold.Unfortunately the threshold is not working on tree table.The code is below,
var partyTreeTable = new sap.ui.table.TreeTable("treeTable",{
columns : [ new sap.ui.table.Column({
template :hl //.bindProperty("selectionState","checked")
}) ],
columnHeaderVisible: false,
visibleRowCount : 10,
threshold : 150,
expandFirstLevel : false,
selectionMode : sap.ui.table.SelectionMode.Single,
navigationMode : sap.ui.table.NavigationMode.Scrollbar,
in controller,
otreePartyTreeUrl += xyz.xsodata/TreeParentsParameters(CNTRY='"+inCountryParam+"',IN_DAYS="+selectedDaysValue+")/Results?$format=json";
var oModel = new sap.ui.model.json.JSONModel();
//oModel.setSizeLimit(200);
oModel.setData(treeData);//result //treeData
sap.ui.getCore().byId("treeTable").setModel(oModel);
Could you please help me on this.
Thanks in advance.
Hello Experts
I want to fetch value of one field from the table on press of delete button but unable to do so.
below is my table and I want to get Member Name on click of Delete button as shown in last column
Below are values in debug mode and membername is coming as blank. This is a new TextField I created (outside the columnlistItem ) and assigned same binding {Membername} as you can see in columnListItem first column "Member Name". As there is no value getting populated so text field is also not visible on screen
onDelete: function(oEvent) {
var oItem = oEvent.getParameter("listItem"); var sPath = oItem.getBindingContext().getPath(); var membername = this.getView().byId("membername1").getText(); var oServiceModel = this.getView().getModel();
Also I observed that I am able to get field values of Main Entity set and not this Member details Entity Set as shown in table above in details page, this Member Details Entity gets values based Main Header Entity which is displayed in Master page.
Below is html code, Text I am trying to display and get value is in line 34 below
<IconTabFilter id="iconTabBarFilter1" tooltip="{i18n>detailIconTabBarInfo}" icon="sap-icon://course-book" textDirection="RTL" iconColor="Negative"> <content> <Table xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" busyIndicatorDelay="{detailView>/lineItemTableDelay}" class="sapUiResponsiveMargin" id="lineItemsList" items="{IssueDetailSet}" noDataText="{i18n>detailLineItemTableNoDataText}" updateFinished="" width="auto" mode="Delete" delete="onDelete"> <headerToolbar> <Toolbar id="lineItemsToolbar"> <Title id="lineItemsHeader" text="{detailView>/lineItemListTitle}"/> </Toolbar> </headerToolbar> <columns> <Column id="__column4"> <Text text="{i18n>detailLineItemTableIDColumn}"/> </Column> <Column demandPopin="true" hAlign="Right" minScreenWidth="Tablet" id="__column5"> <Text text="Issue Date"/> </Column> <Column demandPopin="true" hAlign="Right" minScreenWidth="Tablet" id="__column6"> <Text text="Return Date"/> </Column> <Column demandPopin="true" hAlign="Right" minScreenWidth="Tablet" id="__column7"> <Text text=""/> </Column> </columns> <items> <ColumnListItem press="onNavToIssueDetail" type="Navigation" id="columnListItem"> <cells> <ObjectIdentifier text="{ path: 'Membername' , formatter: '.formatter.titleCase'}" id="membername"/> <ObjectNumber unit="{path: 'Issuedate', type: 'sap.ui.model.type.Date', formatOptions: { style: 'medium' }}" id="lineItemsList1"/> <ObjectNumber xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" unit="{ path: 'Returndate', type: 'sap.ui.model.type.Date', formatOptions: { style: 'medium' }} " state="{ path: 'Returndate', formatter:'.formatter.dateStatus'}" id="lineItemsList3"/> <ObjectNumber xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" unit="{ path: 'Returndate', type: 'sap.ui.model.type.Date', formatOptions: { style: 'medium',relative: true, relativeScale: 'auto' }}" state="{ path: 'Returndate', formatter:'.formatter.dateStatus'}" id="lineItemsList2"/> </cells> </ColumnListItem> </items> </Table> <Text text="{Membername}" maxLines="0" id="membername1"/> <!--<sap.ui.core:InvisibleText xmlns:sap.ui.core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns="sap.m"--> <!-- text="{Membername}" id="membername1"/>--> </content> </IconTabFilter>In most cases, a oData service is available when creating an SAPUI5 application. For times when a oData service is not available, it is possible to build apps with SAP Web IDE with a file-based data model (EDMX-file) and then run on simulated data (Mock Data Server in SAP Web IDE).
Once the data service is available, the app can then be configured to run against the live service rather than the mock data with no other changes. The mock data approach is also useful if you want to prototype an app and have realistic data appear in the UI.
A metadata document (EDMX-file) is defined in the Common Schema Definition Language (CSDL)
Related link http://docs.oasis-open.org/odata/odata/v4.0/odata-v4.0-part3-csdl.html
Typical construction of a EDMX-file:
This sample illustrates a simple relation between employees and skills.
| Component | Description |
|---|---|
| XML declaration | Not necessary for .edmx files, but useful to include if you want to view the file in an editor that supports XML syntax highlighting |
Edmx and DataServiceselements | The “wrapper” for your data model |
Schema | Container for the EntityTypes, Associations and EntityContainer elements |
EntityType 1 | Employee collection |
| EntityType 2 | Skill collection |
| Association | Defines the nature of the connection between the two collections (employee and skills) |
EntityContainer | Exposes the OData collection |
Complete sample EDMX-file https://wiki.scn.sap.com/wiki/pages/viewpage.action?pageId=444437709
The completed model can now be imported into a SAP Web IDE project. During working on your model you can take advantage of the oData Model Editor (which is a plug-in to SAP Web IDE). To enable it, select Tools > Preferences in Web IDE, click on Plugins, locate the OData Model Editor plugin, click the slider to “on”, then Save and Web IDE will reload.
I'm developing my first UI5 app using the Worklist template and attempting to deploy it but I'm getting a error when running it from the Fiori Launchpad. However, it works fine from the WebIDE.
When clicking the tile, it's launching the app but I'm getting a blank page.
Pressing F12 in Chrome shows me the following error:
"Uncaught TypeError: Cannot read property 'metadataLoaded' of undefined"
I've google'd this message but nothing conclusive comes up.
Any ideas?
Hi,
In my SAPUI5 application i am trying to create a record in backend SAP system via NW Gateway system. For this my client is using SMP3.0 SP05 as a middle-ware server through Relay server configured. First i tried using REST Client, & i am able to create it successfully after getting the X-CSRF-Token. But when i am using OData.request() method to create the entry, i am getting forbidden error(403). Please check my below code:-
onPressSubmit:function(){ var newUrl = ""; var token = ""; newUrl = sap.app.config.smpUrl + sap.app.config.CreateActivity; jQuery.sap.require("sap.ui.model.odata.ODataModel"); var f = { headers : { "X-Requested-With" : "XMLHttpRequest", "Content-Type" : "application/atom+xml", "DataServiceVersion" : "2.0", "X-CSRF-Token" : "Fetch", "X-SMP-APPCID": appCID, }, requestUri : newUrl, method : "GET" }; var parameters={ "IvDescription":"Test by UI Team", "IvStartDt":"2016-03-07T00:00:00", "IvEndDt":"2016-03-07T00:00:00", "IvStartTime":"100000", "IvEndTime":"", "IvStatus":"E0001", "IvCategory":"IvActivityType", "Text":"Test team UI", "address":[ { "PartnerName":"", "PartnerFct":"00000009", "PartnerId":"7000011183" }, { "PartnerName":"", "PartnerFct":"ZSEESP1", "PartnerId":"EM00700112" }, ], }; OData.request(f, function(data, oSuccess) { oToken = oSuccess.headers['x-csrf-token']; token = oSuccess.headers['x-csrf-token']; var cookie = oSuccess.headers['Set-Cookie']; /* oHeaders = { "x-csrf-token" : oToken, };*/ OData.request({ requestUri : newUrl+"/AppointmentCreateStdSet", headers : { 'X-Requested-With': 'X', "Content-Type": "application/json", 'Accept' : 'application/json', "DataServiceVersion" : "2.0", "X-CSRF-Token" : token, "X-SMP-APPCID": appCID, "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS", "Access-Control-Allow-Headers": "Origin, Content-Type, Authorization, Accept, X-Request-With", "Access-Control-Allow-Credentials": "true", 'Authorization' : 'Basic ' + btoa("username" + ':password'), "Cookie":cookie }, method : "POST", data:parameters }, function(data,request) { alert("Employee Created Successfully"); location.reload(true); }, function(err) { alert("Employee Creation Failed"); }); });
In chrome i am getting following response 403 forbidden error as shown below.
I don't understand why i am getting "x-csrf-token:Required" as i can see token is successfully posted in the Request Header.
Please suggest if i am doing anything wrong here.
Thanks,
Shrikant.
For space requirements this blog has been split in 5 parts:
| Link | Content |
|---|---|
| How to use Smart Templates with SAP Web IDE - Introduction | How to use Smart Templates with SAP Web IDE - Introduction |
| How to use Smart Templates with SAP Web IDE - Creation | How to use Smart Templates with SAP Web IDE - Creation |
| How to use Smart Templates with SAP Web IDE - ListReport | How to use Smart Templates with SAP Web IDE - ListReport |
| How to use Smart Templates with SAP Web IDE - Object Page | How to use Smart Templates with SAP Web IDE - Object Page |
| This part | How to use Smart Templates with SAP Web IDE - Extensibility |
This is the final part of this blog where I'm going to show you some extensibility concepts related to Smart Templates. So far we have not injected yet any big custom code in the Smart Template application, but we just used the wizard in order to build it: now, in this part, we are going to extend our app with new features, simply by adding some XML and Javascript code to it.
I would like to point out here that what I'm going to show here is something which is still undocumented and things will change for sure in the future. With upcoming versions of SAP Web IDE, probably you won't need to create the extensions manually, but rather you will be guided to add extensions just through easy-to-follow wizards.
I would split this blog in 6 sections/steps:
Let's go step by step and let me show you how to extend the STDemo application I have created in the 4 previous parts of this blog.
If you want to grab the extended app you can do it by cloning the repository located here.
As a first step into our Smart Templates extensibility journey, I would like to show you how you can add a custom filter to the SelectionFields annotation term you placed in the annotation file. This, as you can imagine, must be achieved by using some custom code. I would like to collect in a special folder named ext, all the extensions we are going to implement in our application.
1 - So let's create a new subfolder named ext under webapp and under ext other two subfolders named controllers and fragments.
Fragments will host all the pieces of XML code we will use for our components in the views, Controllers all logics behind this extension implementation.
You should come to a structure like this:
2 - Create a new file named ListReportExtension.controller.js under the controllers folder
3 - In this new file let's copy the following code:
sap.ui.controller("com.st.demo.ext.controllers.ListReportExtension", {
onBeforeRebindTableExtension : function(oEvent) { alert("On Before Rebind Table Extension");
}
});
4 - Save the file.
5 - Create a new file named CustomFilterExtension.fragment.xml, this time under the fragments folder
6 - Paste in this file the following code:
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns:smartfilterbar="sap.ui.comp.smartfilterbar" xmlns="sap.m"> <smartfilterbar:ControlConfiguration groupId="_BASIC" index="1" key="PriceRangeFilter" label="Price ranges" visibleInAdvancedArea="true"> <smartfilterbar:customControl> <ComboBox id="PriceRangeFilter-combobox" selectedKey="0"> <core:Item key="0" text="All"/> <core:Item key="1" text="Price between 0-100"/> <core:Item key="2" text="Price between 100-500"/> <core:Item key="3" text="Price between 500-1000"/> <core:Item key="4" text="Price over 1000"/> </ComboBox> </smartfilterbar:customControl> </smartfilterbar:ControlConfiguration></core:FragmentDefinition>
7 - Save the file
8 - Open the manifest.json file
9 - Go to the XML editor
10 - Locate the part of code showing:
"extends": { "extensions": { }
},11 - Replace this part with the following:
"extends": { "extensions": { "sap.ui.viewExtensions": { "sap.suite.ui.generic.template.ListReport.view.ListReport": { "SmartFilterBarControlConfigurationExtension|ProductSet": { "className": "sap.ui.core.Fragment", "fragmentName": "com.st.demo.ext.fragments.CustomFilterExtension", "type": "XML" } } }, "sap.ui.controllerExtensions": { "sap.suite.ui.generic.template.ListReport.view.ListReport": { "controllerName": "com.st.demo.ext.controllers.ListReportExtension" } } }
},
12 - If you start the application now you can see the new drop down control, but even if you choose something from it and press the Go button, you won't get anything filtered. The only thing you get is this nice message
This message comes from the ListReportExtension.controller.js file where we have defined a function for the event onBeforeRebindTableExtension. This event is fired when you click on the Go button and it's just there that we are going to put our code for filtering table records.
13 - So reopen the ListReportExtension.controller.js and replace the onBeforeRebindTableExtension function with the following:
NOTE: on the line 9 we have the key PriceRangeFilter which must match the same key defined in the CustomFilterExtension.fragment.xml file on the second line.
sap.ui.controller("com.st.demo.ext.controllers.ListReportExtension", { onBeforeRebindTableExtension: function(oEvent) { var oBindingParams = oEvent.getParameter("bindingParams"); oBindingParams.parameters = oBindingParams.parameters || {}; var oSmartTable = oEvent.getSource(); var oSmartFilterBar = this.byId(oSmartTable.getSmartFilterId()); if (oSmartFilterBar instanceof sap.ui.comp.smartfilterbar.SmartFilterBar) { var oCustomControl = oSmartFilterBar.getControlByKey("PriceRangeFilter"); if (oCustomControl instanceof sap.m.ComboBox) { var vPriceRange = oCustomControl.getSelectedKey(); switch (vPriceRange) { case "0": oBindingParams.filters.push(new sap.ui.model.Filter('Price', null)); break; case "1": oBindingParams.filters.push(new sap.ui.model.Filter('Price', 'LE', "100")); break; case "2": oBindingParams.filters.push(new sap.ui.model.Filter('Price', 'BT', "100", "500")); break; case "3": oBindingParams.filters.push(new sap.ui.model.Filter('Price', 'BT', "500", "1000")); break; case "4": oBindingParams.filters.push(new sap.ui.model.Filter('Price', 'GT', "1000")); break; default: break; } } } }
});
14 - Save the file
NOTE: Of course if your namespace is different, you need to change it in all the .js files listed here.
15 - Run again the application or refresh it.
16 - Now if you filter Prices for example from 100 to 500, you will get the expected records:
As a second step, let's add a custom button to the LineItem Annotation Term to execute some special custom functions on our records, like for example in this case, to change the price of a selected product.
Since this feature is not natively present in our application, we need to extend it. The first thing to do is to create a new button and then to add some logic to this button. The extension for creating the new button is placed directly into the manifest.json file.
1 - Open the manifest.json file with the XML editor
2 - Locate the extends section and just after the line
"controllerName": "com.st.demo.ext.controllers.ListReportExtension"
add a comma and then the the following code:
"sap.ui.generic.app": { "ProductSet": { "EntitySet": "ProductSet", "Actions": { "ChangePrice": { "id": "ChangePrice", "text": "Change price (Ext)", "press": "onChangePrice" } } }
}like in this picture
3 - If you run the application now, the button is in place, but clicking on it nothing happens, because we need to add some logic behind. Let's reuse the ListReportExtension.controller.js controller we created previously and let's add the following code just before the last "});" statement. Of course you need to put a comma after the onBeforeRebindTableExtension function, because you are adding two further functions to the module. The code to add is the following:
onChangePrice: function(oEvent) { var oSmartTable = oEvent.getSource().getParent().getParent().getTable(); var item = oSmartTable.getSelectedItem(); if (item) { var oContext = item._getBindingContext(); this._showChangePricePopup(oContext); } else { sap.m.MessageBox.error("You must first select a row!", {}); } }, _showChangePricePopup: function(oContext) { var that = this; var oModel = this.getView().getModel(); var oField = new sap.ui.comp.smartfield.SmartField({ value: "{Price}" }); var oParameterDialog = new sap.m.Dialog({ title: "Change Price", content: [new sap.m.Text({ text: 'New Price ' }), oField], beginButton: new sap.m.Button({ text: "OK", press: function() { that.getView().getModel().submitChanges(); oParameterDialog.close(); } }), endButton: new sap.m.Button({ text: "Cancel", press: function() { that.getView().getModel().resetChanges(); oParameterDialog.close(); } }), afterClose: function() { oParameterDialog.destroy(); } }); oParameterDialog.setModel(oModel); oParameterDialog.setBindingContext(oContext); oParameterDialog.open(); }Here we are checking if there is a line selected: if yes the application invokes the _showChangePricePopup function which shows up the text box where you can enter the new price. If there isn't a selected line a message pops up informing the user that he needs to select a product
4 - Run the application and check that the button is perfectly working
For this new kind of extension we need to create 2 further files, both in the fragments folder. The two files will act as a sort of template for a new custom column in the Smart Table and for any cell of this new column.
In this step, we just want to add a static column to the table: it means that the content of its cells will be fixed and won't change with other columns.
In particular we want to create a new column, to be the last in the table, showing the text "Additional info", so that the user knows that by clicking on a row, he can get the product details.
1 - Create a new file named ListReportResponsiveTableColumns.fragment.xml under the folder ext/fragments
2 - Put in this file the following XML code:
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m"> <Column> <Text text="..." /> <customData> <core:CustomData key="p13nData" value='\{"columnKey": "AdditionalInfo"}' /> </customData> </Column></core:FragmentDefinition>3 - Create another file named ListReportResponsiveTableCells.fragment.xml always under ext/fragments
4 - Paste inside this file the XML code
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m"> <Text text="Additional info"></Text></core:FragmentDefinition>
5 - Now reopen the manifest.json with the code editor
6 - Just after the SmartFilterBarControlConfigurationExtension extension add a comma and then the code
"ResponsiveTableColumnsExtension|ProductSet": { "className": "sap.ui.core.Fragment", "fragmentName": "com.st.demo.ext.fragments.ListReportResponsiveTableColumns", "type": "XML"
},
"ResponsiveTableCellsExtension|ProductSet": { "className": "sap.ui.core.Fragment", "fragmentName": "com.st.demo.ext.fragments.ListReportResponsiveTableCells", "type": "XML"
}
7 - Run the application and you will get the new column
What about if we want to add a new column having the cells content based on the content of the cells of another column?
For example we want to show a sort of rating indicator which shows 1 star if the product's price is greater than 500 and 5 stars on all other cases. This of course cannot be a likely case, but you can change the logic to display anything more meaningful.
1 - Open the ListReportResponsiveTableColumns.fragment.xml file and add to it the XML code for the new column:
<Column> <Text text="Rating"/> <customData> <core:CustomData key="p13nData" value='\{"columnKey": "Rating", "leadingProperty":"Price"}'/> </customData> </Column>2) Open the ListReportResponsiveTableCells.fragment.xml file and add the code for the new cell
<RatingIndicator value="{= ${Price} > 500 ? 1:5}" enabled="false"></RatingIndicator>3)Run again or refresh the app and you get the new calculated column
Let's move now to the Object Page and let's try to add a button in the header bar just aside the buttons for editing and deleting the product.
We won't add any big logic to this button, I just want to show you how you can do it: by clicking on this new button only a nice message will pop up. Feel free to put whatever logic you need under it.
1 - Create a new controller named ObjectPageExtension.controller.js under the ext/controllers folder
2 - Add the following JS code to it
sap.ui.controller("com.st.demo.ext.controllers.ObjectPageExtension", { onObjectPageCustomAction: function() { sap.m.MessageBox.success("Hello from ObjectPage custom action!", {}); }
});NOTE: Again here please pay attention that if you are using a different namespace you need to replace the string "com.st.demo" with yours.
3 - Open the manifest.json file and go in the extends section
4 - Add to the sap.ui.controllerExtensions this new extension
"sap.suite.ui.generic.template.ObjectPage.view.Details": { "controllerName": "com.team.meeting.ext.controllers.ObjectPageExtension", "sap.ui.generic.app": { "ProductSet": { "EntitySet": "ProductSet", "Header" : { "Actions": { "ObjectPageCustomAction" : { "id" : "ObjectPageCustomAction", "text" : "My Custom Action", "press" : "onObjectPageCustomAction" } } } } }
}
5 - Save the file
6 - Re-run the application and go to the object page. The new button has been added.
In this last step I'm going to show you how to add to the Object Page some fields which are, let's say, "clickable". When clicking on them, indeed, you get some details about the clicked item. Let's take as an example the product's supplier. You want to add this information to your Object Page (i.e. Supplier Id and Supplier Name), but when clicking on the supplier name you want to get the supplier's contact information.
This extension is made directly in the annotation file.
NOTE: At moment we can consider this as an extension because there is no way to do it within the AM.
1 - Open the annotation1.xml file with the AM
2 - Create a new UI.FieldGroup term with the qualifier FGSupplier and add a UI.DataField and a UI.DataFieldForAnnotation terms to it. The UI.DataField can be bound to the SupplierID and the UI.DataFieldForAnnotation can be temporarily left blank as it is, without any assignment because we are going to change this by editing directly the XML code.
3 - Click on Apply and save the annotation file.
4 - Switch to the BusinessPartner entity set and click on the Annotate button and save the file. We are not going to put any annotation term for the time being here because we will add it through the XML editor later. We have just created the annotation placeholder
5 - Now reopen the annotation1.xml file with the XML editor
6 - Beautify the file by clicking onf Edit -> Beautify
7 - Locate the annotation for the BusinessPartner entity set: it should be at the end of the file
8 - Replace the entire annotation with this one:
<Annotations Target="/IWBEP/GWSAMPLE_BASIC.BusinessPartner"> <Annotation Term="Communication.Contact"> <Record> <PropertyValue Path="CompanyName" Property="fn"/> <PropertyValue Property="tel"> <Collection> <Record> <PropertyValue EnumMember="Communication.PhoneType/fax" Property="type"/> <PropertyValue Path="FaxNumber" Property="uri"/> </Record> <Record> <PropertyValue EnumMember="Communication.PhoneType/work Communication.PhoneType/pref" Property="type"/> <PropertyValue Path="PhoneNumber" Property="uri"/> </Record> </Collection> </PropertyValue> <PropertyValue Property="email"> <Collection> <Record> <PropertyValue Path="EmailAddress" Property="address"/> </Record> </Collection> </PropertyValue> </Record> </Annotation> </Annotations>
9 - Locate the point in the file where you placed the UI.DataFieldForAnnotation term
10 - Replace the entire term with the following:
<Record Type="UI.DataFieldForAnnotation"> <PropertyValue Property="Label" String="Supplier"/> <PropertyValue AnnotationPath="ToSupplier/@Communication.Contact" Property="Target"/> <Annotation EnumMember="UI.ImportanceType/High" Term="UI.Importance"/> </Record>
11 - Save the file.
12 - Now we just need to display our new UI.FieldGroup. Open the annotation1.xml file with the AM
13 - Add a new UI.ReferenceFacet to the already existing UI.HeaderFacet
14 - Assign to this new UI.ReferenceFacet the UI.FieldGroup (FGSupplier) we have created previously.
15 - Save the file
16 - Re-run or refresh the application and you will see new extension.
Congratulations! You have successfully extended your Smart Template application! As I said at the beginning of this part, if you want to get the complete source code for this example, feel free to download it from Github here.
Hi Experts,
I am using REST API of IDM and trying to retrieve only top 10 records of the service below,
http://<server>/v2/service/ET_MX_PERSON?$filter=SV_DISPLAYNAME eq 'George*'&$select=SV_DISPLAYNAME,SV_MSKEYVALUE&$top=2&$skip=0&$inlinecount=allpages
I can see total count as 92. But I always receive all 92 records instead of top 10. Do I need to do something in the backend to setup for $top/$skip?
Thanks,
Vijay
Hi,
I am customizing standard fiori application with Web IDE and in this application I have below requirement.
I want to add one check box and on selection of the checkbox, one of the existing input field should be shown or hidden.
Same field is there on the multiple screens. So, I have to add check box on the multiple screens. But, when it is selected on one screen, it should be reflected on another as well.
This is what I have done.
In the init method, I have written below javascript code to add the checkbox.
if(!this.oOtherDate)
{
var that = this;
this.oOtherDate = new sap.m.CheckBox("cOtherDelDate", {
text: "{i18n>OTHER_DELIVERY}",
selected: "{path : 'soc_cart>/showRddInput'}", // This carries the checkbox selection to other pages. It is JSON model.
select: function(oEvent) {
var checked = oEvent.getParameters().selected;
oModelList.getData().showRddList = !checked;
oModelList.getData().showRddInput = checked;
}
});
}
On above code, on the selection event of check box, I am setting the two JSON properties. One for the checkbox value and another to make one element hidden and vice versa.
Upto this point, everything works fine.
BUT, now, how can I bind the JSON property value "showRddList" to the element's visible property?
I have tried doing below but it is giving error:
this.byId("Field1").setVisible("{path : 'soc_cart>/showRddList'}");
setVisible() method expects boolean value and in above line of code, it considers as the string value.
FYI... Element which needs to be hidden is defined on the XML view and we can't extend or customize the view to specify the binding property in the view. So, I have to set it from the controller only.
Is there a possibility to set the visible property from controller to the existing element?
Thanks.