code:
var text='<div data-sap-ui-type="sap.ui.commons.TextField" id="TF5" data-value="69190"></div>';
var myView = sap.ui.view({id:"myView",viewContent:text, type:sap.ui.core.mvc.ViewType.HTML});
myView.placeAt("content3");
Here how can i give placeholder?
Are you working with JS views?
TextFields have a porperty called placheolder, use the api reference to look up properties for controls: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.commons.TextField.html#constructor
This will work:
var text = new sap.ui.commons.TextField({
placeholder: "my text"
});
Since you are using HTML-Views, this solution should work:
var text = '<div data-sap-ui-type="sap.ui.commons.TextField" id="TF5" data-value="69190" data-placeholder="My Placeholder"></div>';
var myView = sap.ui.view({
id: "myView",
viewContent: text,
type: sap.ui.core.mvc.ViewType.HTML
});
myView.placeAt("content3");
There is no default option for that but check this link:
http://scn.sap.com/community/developer-center/front-end/blog/2013/01/05/adding-placeholder-functionality-for-textfield-in-sapui5
Related
I´m using SAPUI5, I have a MasterPage and a DetailPage, in the MasterPage I have a List and when I select de Item in the List the information is displayed in the DetailPage.
In the DetailPage I have a PositiveAction, When I press the PositiveAction I need to get the Data of the DetailPage but I don't know how to do this.
My code of the Item Press
onPoSelect : function(oEvent) {
var oListItem = oEvent.getParameter('listItem');
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("DetailPanel", {
invoicePath: oListItem.getBindingContext("solped").getPath().substr(1)
});
},
My code in the DetailPanel
onInit: function (){
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("DetailPanel").attachPatternMatched(this._onObjectMatched, this);
},
_onObjectMatched: function (oEvent) {
this.getView().bindElement({
path: "/" + oEvent.getParameter("arguments").invoicePath,
model: "solped"
});
},
The line "oEvent.getParameter("arguments").invoicePath,"
returns this.
Invoices(CustomerName='Alfreds Futterkiste',Discount=0f,OrderID=10702,ProductID=3,ProductName='Aniseed Syrup',Quantity=6,Salesperson='Margaret Peacock',ShipperName='Speedy Express',UnitPrice=10.0000M)
I have the information but it is a String, How can I convert this String in an Object? Or, how else can I access the information in the view?
The image of the View
enter image description here
I assume you can already see the data of the detail in your Detail view.
You binded the data to the view by bindElement function and to retrieve them back in the code you are looking for "getBindingContext" function.
Create following function in your Detail controller:
// this must be connected to Button -> <Button press="onPositivePress">
onPositivePress: function(oEvent) {
var oBindingContext = this.getView().getBindingContext("solped");
// this is the path you can use to call odata service
var sPath = oBindingContext.getPath();
// this is data you are looking for
var oReqData = oBindingContext.getObject();
}
You can get all the properties as an object by passing the binding path as an argument to the getProperty function of the underlying Data model.
var oModel = this.getView().getModel("solped");
var oProps = oModel.getProperty(oListItem.getBindingContext("solped").getPath());
You can then access these properties as
oProps.CustomerName;
oProps.OrderID;
...
for converting string to object see below example.
var a = "how r u";
var b = [a];
you will get object of a in b.
I am trying to load models into a view. i am able to load the model when i do not give any name for the model like:-
sap.ui.getCore().byId("mao").setModel(oModel);
But the model is not set to view if i give like the below. I am not getting any error also
sap.ui.getCore().byId("mao").setModel(oModel,"myModel");
I am using load data to load my data
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData(servicePath);
sap.ui.getCore().byId("mao").setModel(oModel);
Try this:
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData(servicePath);
var oController = this;
oModel.attachRequestCompleted(function() {
var data = oModel.getData();
oController.getView().setModel(data, "namedModel");
});
Then you can call like so:
this.getView().getModel("namedModel");
Your binding paths in the view should also be adjusted for named model binding. Details please see
at documentaion regarding the binding path.
The best way to set a model to a view is by defining them in Component.js file or if you are using 1.33 and above version then define the model in manifest.json file.
Set Model in Component.js file:
Define the model init method as shown below:
sap.ui.define(['jquery.sap.global', 'sap/ui/core/UIComponent'],
function(jQuery, UIComponent) {
"use strict";
var Component = UIComponent.extend("samples.components.sample.Component", {
metadata : {
}
init: function() {
var sServiceUrl = 'example/servie';
var oModel = new sap.ui.model.odata.ODataModel (sServiceUrl, true);
this.setModel (oModel, "modelName");
}
});
return Component;
});
Set the model in manifest.json file
https://openui5.hana.ondemand.com/#docs/guide/be0cf40f61184b358b5faedaec98b2da.html
Now this model will be available in any controller and you can access the model as mentioned below:
var oModel = this.getView().getModel("modelName");
this._sValidPath =jQuery.sap.getModulePath("OpenUI.c", "/name.pdf");
this._oModel = new JSONModel({
Source: this._sValidPath,
Title: "My Custom Title",
Height: "600px"
});
sap.ui.getCore().setModel(this._oModel,"mainModel2");
sap.ui.getCore().byId("mao").setModel(oModel);
But the model is not set to view if i give like the below.
You did not bind this to the View you bound it to the core.
Remove the .byId("mao") and it should work.
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData(servicePath);
sap.ui.getCore().setModel(oModel, "myModelName");
Read Model:
var oMyModel = sap.ui.getCore().getModel("myModelName");
sap.ui.getCore().byId("mao").setModel("myModel") means you want to get a object by the ID "mao" and assign a model to the object.
This is how the view binding works:
this.getView().setModel(oModel, "myModelName");
var oMyModel = this.getView().getModel("myModelName");
On the OpenUI5 site theres a nice developer walkthrough check this out:
https://openui5beta.hana.ondemand.com/#docs/guide/70ef981d350a495b940640801701c409.html
I have the following select in a table in my xml view.
Table:
<Table id="variables"
rows="{
path: 'modelname>/ZDATSet'
}">
...
Select:
<m:Select
selectedKey="{modelname>Datetype}"
items="{
path: 'modelname>/ZTYPESet'
}">
<core:Item key="{modelname>Datetype}" text="modelname>Datetypetxt}" />
</m:Select>
Furthermore I have a button in an other row in the table.
In the press-function I want to read the currently selected key of the select-box.
If I try it with
var button = oEvent.getSource();
var context = button.getBindingContext("modelname");
var datetype = context.getProperty("Datetype");
I only get the preselected value but not the change from the user input.
(Same problem with an text input in the row)
I already put data-sap-ui-xx-bindingSyntax="complex" in the index.html
I found the solution now.
I thought <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-xx-bindingSyntax="complex" ... should be enough for the default two way binding.
Now I added oModel.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay); to the model and it works fine.
If your button is in the same row you could do something like this in its press event:
onPress:function(oEvent){
var button = oEvent.getSource();
var context = button.getBindingContext("modelname"); //Points to the current row
var datetype = context.getProperty("DateType");
...
}
If the button is outside of the table you have to give us more details: Which Table are you using and how is it configured, do you want to read the value of the selectbox in the currently selected row? Add more code!
Based on your code snippet, you are using model binding to set the items and the selected key of your Select.
In the Button press handler you can get the current value from the binding context:
onPress: function (oEvent) {
oEvent.getSource().getBindingContext("modelname").getProperty("Datetype");
}
Here once you set the selectedKey property in SelectionInputType.COMBOBOX, you can take value as below.
oController = this; var view = oController.getView(); var oModel = view.getModel(); var data = oModel.getData();
I'm trying to add Page into IconTabFilter and i've got, but only the title is projected on the screen.
IconTab view :
createContent : function(oController) {
var oPage = new sap.m.Page({title: "IconTab",showHeader: false});
var oIconTab = new sap.m.IconTabBar ("idTabBar",{});
var itemBar1 = new sap.m.IconTabFilter({
key:"tab1",
icon:"sap-icon://database",
content:[ new sap.ui.view({id:"idTabIcon",viewName:"prova5.tabIcon1", type:sap.ui.core.mvc.ViewType.JS})
]
})
oIconTab.addItem(itemBar3);
oPage.addContent(oIconTab);
return oPage;
}
content of IconTabFilter view:
createContent : function(oController) {
var oPage = new sap.m.Page({
title: "Icon Tab Page 1",
showNavButton: true,
navButtonPress: oController.navButtonMethod
});
var obutton = new sap.m.Button({text: "hello"});
oPage.addContent(obutton);
return oPage;
}
any solution?
The problem appears when using sap.m.Page in your view as a return value in the createContent function. If the usage of sap.m.Page in your view is not necessary for your purpose try to return another control (e.g. sap.m.FlexBox). That solved the problem for me.
Try to Inspect Elements and find out div and in the
class ".sapMITBContent" add height in Pixel around 500px and you will get page visible.
I'm having trouble accessing some innerHTML that I need to use as a title for a menu bar:
See the attached image for details...
The title "AMRIS" is what I need to store to a javascript variable as a string.
I will later be using the following code to fill a Bootstrap menu with the title I grab:
echo '<script type="text/javascript">
var subTitle = document.getElementById("mobMenuTitle2");
//This is currently filling the Sub Menu with a title//
subTitle.innerHTML = "Sub Test";
</script>';
RIGHT-CLICK > OPEN IMAGE IN NEW TAB TO SEE FULL SIZE
If you need the html of opend item, try like this
var openedList = document.getElementsByClassName('opened');
var menuLink = openedList[0].getElementsByClassName('menu-link');
var anchorText = menuLink[0].innerHTML;
Instead if you want to retrieve the html of list X (X is a numer 0 based)
var accordion = document.getElementsByClassName('accordion-menu');
var list = accordion[0].getElementsByTagName('li');
var menuLink = list[X].getElementsByClassName('menu-link');
var anchorText = menuLink[0].innerHTML;
var opn = $(".accordion-menu.opened.menu-link").context.title;
var opnr = opn.replace("MagLab", "");
var subTitle = document.getElementById("mobMenuTitle2")
subTitle.innerHTML = opnr;