In my sapui5 project i am using sap.m.MessageBox.confirm its working fine but when i use sap.m.MessageBox.error or sap.m.MessageBox.warning it shows error
Uncaught TypeError: undefined is not a function
I have added jQuery.sap.require("sap.m.MessageBox"); still the issue is not solved. please give solution for this problem
Thanks
Sorry for not posting the code earlier
Edited 1
View
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="trial.S1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
</content>
<footer>
<OverflowToolbar>
<ToolbarSpacer />
<Button id="errorId" text="Error" type="Accept"
press="fnOnerror" />
<Button id="confirmId" text="Confirm" type="Accept"
press="fnOnconfirm" />
</OverflowToolbar>
</footer>
</Page>
</core:View>
Conroller
jQuery.sap.require("sap.m.MessageBox");
sap.ui.controller("trial.S1", {
fnOnerror : function(oEvent){
sap.m.MessageBox.error("My error message");
},
fnOnconfirm : function(oEvent){
sap.m.MessageBox.confirm("My Confirm message")
}
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("trial");
var app = new sap.m.App({initialPage:"idS11"});
var page = sap.ui.view({id:"idS11", viewName:"trial.S1", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
How should we give you a solution for your issue if your information is not enough? From what you describe it is hard to tell what you are doing wrong. Make sure to always add more information including code.
After getting the information from you we know now that you are using version 1.28.9 of UI5. If you would have checked the API docs at https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.MessageBox.html#.error then you would have known that the APIs you are using were introduced in 1.30!!!
Related
i'm not getting any results when i try to display json data in the master page.It just displays no data whereas when i do the same thing in the main view i'm able to display the data.
Here is my code :
Mview.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true"
controllerName="com.firstproject.FirstProject.controller.Mview" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Master Page">
<content>
<List id="UserList" items="{users>/Users}" headerText="Users">
<items>
<ObjectListItem title="{users>name}"/>
</items>
</List>
</content>
</Page>
index.html
<!DOCTYPE HTML>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>FirstProject</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-preload="sync"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"com.firstproject.FirstProject": "./"}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
var app = new sap.m.SplitApp({initialPage:"idMasterPage1"});
var mpage = sap.ui.view({id:"idMasterPage1", viewName:"com.firstproject.FirstProject.view.Mview",type:sap.ui.core.mvc.ViewType.XML});
var dpage = sap.ui.view({id:"idDetailPage1", viewName:"com.firstproject.FirstProject.view.Dview",type:sap.ui.core.mvc.ViewType.XML});
app.addMasterPage(mpage);
app.addDetailPage(dpage);
app.placeAt("content")
</script>
</head>
<body class="sapUiBody" id="content">
</body>
manifest.json
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "com.firstproject.FirstProject.i18n.i18n"
}
},
"users":{
"type":"sap.ui.model.json.JSONModel",
"uri":"model/listdata.json"
}
}
Why is this happening?
Also i'm getting this error with or without any list in the master view
Assertion failed: ManagedObject.apply: encountered unknown setting 'initialPage' for class 'sap.m.SplitApp' (value:'idMasterPage1')
The attribute initialPage is no longer usable as an attribute for the sap.m.SplitApp control. Instead you can use initialMaster association to avoid this message.
var app = new sap.m.SplitApp({initialMaster :"idMasterPage1"});
The entire manifest.json is not evaluated because it's not being loaded at all. Start from OpenUI5 walkthrough and review your code by comparing it with specifically the steps "Component Configuration" and "Descriptor for Applications".
I have created a SAPUI5 app for bar code scanner using cordova plugin.
When I deploy it on FIORI Launchpad and try to run the app. then the camera opens to read the bar code but it does not gives the result of the scanned code.
Any help please?
Following are the screen shots & Codes of my project on Eclipse.
Project Structure
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.localResources("barcodenew");
var app = new sap.m.App({initialPage:"idMain1"});
var page = sap.ui.view({id:"idMain1",
viewName:"barcodenew.Main",
type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
<script type="text/javascript" src="cordova.js"> </script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
View.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="barcodenew.Main"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="ISPC Asset BarCode">
<content>
<Label text="BarCode" class="sapUiSmallMargin" />
<Input id="BCID" width="150px" value="12345"/>
<Button id="BC" text=""
icon="sap-icon://camera"
press="handleCamera" type="Accept" />
</content>
</Page>
</core:View>
Controller.js
sap.ui.controller("barcodenew.Main", {
handleCamera: function(evt){
var bc = this.getView().byId("BCID");
cordova.plugins.barcodeScanner.scan(
function(result){
bc.setValue(result.text);
},
function(error){
alert("Sorry, Camera Error!!"+error);
}
);
},
});
Camera
Regards,
Firoz.
In Fiori Launchpad inside the Fiori Client - use cordova/Kapsel plugins they mention
"Add windows.parent before cordova to reach the launchpad level."
Maybe
window.parent.cordova.plugins.barcodeScanner.scan
instead of
cordova.plugins.barcodeScanner.scan
can help you.
I don't have a FLP to try it. So I don't know, if it really works.
'my-layout' code :
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >
<polymer-element name="m-layout" >
<template>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: 'm-layout',
togglePanel: function() {
this.$.paper_drawer_panel.togglePanel();
}
});
</script>
</polymer-element>
If I add paper-drawer=toogle attribute, paper-icon-button in main drawer is disappear...
'main.jsp' code:
<%# page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/m-layout.html" >
<style>
html, body {
height: 100%;
}
body {
margin: 0;
background-color:#E5E5E5;
}
</style>
</head>
<body>
<m-layout></m-layout>
</body>
</html>
If paper-drawer-toggle attribute remove and main.jsp run, I can see icon-button but toggle is not working..
I can't found reference about paper-drawer-panel toggle and behavior.....
What should I do to toggle paper-drawer-panel?
There are a few things I noticed in your code.
In your my-layout code you should also be importing polymer.html
Which version of Polymer are you using? Since you are using the webcomponents-lite.min.js and the title states Polymer 1.0, I am assuming you are using 1.0. In Polymer 1.0 elements are defined using <dom-module id="m-layout"> instead of <polymer-element name="m-layout">
the toggle function in your script is not necessary, the toggle works out of the box using the paper-drawer-toggle attribute on the paper-icon-button element.
I am not sure of your directory structure but the following code works for me. I am assuming you have bower_components (including all polymer, iron, and paper elements) inside of your root. Also in your root I am assuming you have an elements directory containing your m-layout.html file.
You should check your developer tools in your browser to check that all your resources are loading correctly and there are no errors. If so, then your import paths to the components are wrong.
In your elements/m-layout.html:
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="m-layout" >
<template>
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Application</div>
</paper-toolbar>
<div> Drawer content... </div>
</paper-header-panel>
<paper-header-panel main>
<paper-toolbar>
<paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
<div>Title</div>
</paper-toolbar>
<div> Main content... </div>
</paper-header-panel>
</paper-drawer-panel>
</template>
</dom-module>
<script>
Polymer({
is: 'm-layout'
// this is not needed
//togglePanel: function() {
// this.$.paper_drawer_panel.togglePanel();
//}
});
</script>
and this in main.jsp:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<!-- Load platform support before any code that touches the DOM. -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/m-layout.html">
</head>
<body>
<m-layout></m-layout>
</body>
</html>
Also keep in mind, that the drawer (and therefore the toggle) is only activated when the screen is very small (mobile). To force the drawer behavior no matter what the screen size, you can force the narrow view by setting the force-narrow attribute: <paper-drawer-panel force-narrow="true">. Alternatively you can set the width at which the drawer should be activated, <paper-drawer-panel responsive-width="800px">.
http://jsbin.com/winedi/edit?html,output
<style>
</style>
<template>
<paper-drawer-panel id="drawer">
<div drawer>
drawer
</div>
<paper-header-panel main>
<paper-toolbar class="teal-500">
<paper-icon-button icon="menu" on-tap="menuToggle"></paper-icon-button>
<div class="title">{{toolBarTitle}}</div>
<paper-icon-button icon="search"></paper-icon-button>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
is: "layout-inbox",
menuToggle: function() {
if (this.$.drawer.narrow && this.$.drawer.getBoundingClientRect().width < parseInt(this.$.drawer.responsiveWidth)) {
this.$.drawer.togglePanel();
} else {
this.$.drawer.forceNarrow = !this.$.drawer.forceNarrow;
}
},
properties: {
toolBarTitle: {
type: String,
value: "lucok"
}
}
});
</script>
</dom-module>
I think your code is working. The paper-drawer-toggle attribute is used to tell the browser to show the menu icon when the screen with is narrow. When you size the screen to a small enough width, you should seen the menu icon appear.
Maybe did you just miss the correct DocType in the head of main.jsp
<!DOCTYPE html>
I am new to SAPUI5. I'm able to create controls in my SAPUI5 mobile application.But I'm not able to set them in a layout. I'm writing my view as HTML page and adding my controls to that. I have tried placing them in a division but I don't know what is the attribute to specify layout.Please guide about the layouts.
Thanks
<template data-controller-name="sample.controllers.index">
<div data-sap-ui-type="sap.m.Page" data-title="Title">
<div data-sap-ui-aggregation="content">
<div data-sap-ui-type="sap.m.Layout" data-type="vertical">
<div data-sap-ui-type="sap.m.Input" data-width="20%"
id="Textfield" data-placeholder="User" data-max-length="10"></div><br>
<div data-sap-ui-type="sap.m.Input" data-width="20%" id="Textfield2" data-placeholder="Password" data-type="Password"></div><br>
<div data-sap-ui-type="sap.m.TextArea" data-width="30%" id="textarea" data-placeholder="Text for information..."></div>
</div>
<div data-sap-ui-type="sap.m.Button" id="btn1" data-text="My Button1" data-press="doIt"></div>
<div data-sap-ui-type="sap.m.Button" id="btn2" data-text="My Button2" data-press="doIt"></div>
<div data-sap-ui-type="sap.m.Label" data-text="I'm Label" data-width="100px" data-height="100px" data-background-colour="orange"></div>
</div>
</div>
This is my sample code and when i run this on browser it shows me a error message that
Uncaught Error: failed to load 'sap/m/Layout.js' from resources/sap/m/Layout.js: 404 - Not Found
here is my index.html
`
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("sample");
var app = new sap.m.App({initialPage:"idindex1"});
var page = sap.ui.view({id:"idindex1", viewName:"sample.views.index", type:sap.ui.core.mvc.ViewType.HTML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>`
<div data-sap-ui-type="sap.m.Layout" data-type="vertical">
There is no such a control like sap.m.Layout. For layout, you can choose any from the sap.ui.layout controls, for example, sap.ui.layout.Grid
I'm trying to figure out how to apply a custom javascript function to a dropdown menu element that is located in the iframe. Javascript changes the look and feel of the dropdown and works great for the parent page. It doesn't work for an element in the iframe. I searched this website for an answer but unfortunately some of the examples given here didn't work for my page. A couple of things to keep in mind:
Both pages are in the domain
I can't directly place the js on the page that is loaded in the iframe(code below is just an example, the real thing is not accessible to me)
I'm using the js libraries found here(i modified it a bit to fit my needs) http://www.marghoobsuleman.com/jquery-image-dropdown
Here's the page that will be loaded in iframe. I'm trying to style the select element:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Iframe</title>
</head>
<body>
<label for="specialty">Specialty: </label>
<select name="specialty" id="specialty" class="dropdown">
<option value="calendar">Calendar</option>
<option value="shopping_cart">Shopping Cart</option>
</select>
</body>
</html>
Here's the parent from which I try to invoke the js:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Parent Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.dd.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
try {
$("body select").msDropDown();
}
catch(e) {
alert(e.message);
}
});
$('#frame').load( function(){
try {
$(this.contentDocument).find('select').msDropDown();
}
catch(e) {
alert(e.message);
}
});
</script>
</head>
<body>
<label for="specialty">Specialty: </label>
<select name="specialty" id="specialty" class="dropdown">
<option value="calendar">Calendar</option>
<option value="shopping_cart">Shopping Cart</option>
</select>
<iframe src="add.html" id="frame" name="frame"></iframe>
</body>
</html>
Thanks in advance
As far as I can tell, this doesn't seem possible. It may be an issue with the plugin itself, in that even executing the function on the DOM of the iframe, the function instead executes on the DOM of the parent.