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".
Related
I am new to SAP UI5 and I am trying to develop a webpage with images and instructions. I am unable to display an image in my Webapp and need help with it. I looked through the internet and could not find any proper solution yet. Below is my code. Can you please help me understand what I am missing?
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'>
</script>
<style>
.myimage{float:right !important; width:300px; height:200px;}
</style>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
App.view.xml:
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
>
<Page title="Image">
<content>
<Image id="QRCode" src="images/img1.jpg" />
</content>
</Page>
</mvc:View>
App.controller.js:
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(
Controller
) {
"use strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
onBeforeRendering: function() {
this.getView().byId("QRCode").addStyleClass("myimage");
},
});
});
index.js:
sap.ui.define([
"sap/ui/core/mvc/XMLView"
], function (XMLView) {
"use strict";
XMLView.create({
viewName: "sap.ui.demo.walkthrough.view.App"
}).then(function (oView) {
oView.placeAt("content");
});
});
Loading images is a little tricky, especially if you want it to run in the launchpad.
You should create the path dynamically in your controller and put it into a view model:
const sPath = sap.ui.require.toUrl("sap/ui/demo/walkthrough/images/img1.png");
const oModel = new JSONModel({ imagePath: sPath });
this.getView().setModel(oModel, "view");
<Image id="QRCode" src="{view>/imagePath}" />
Of course it's very important to pass the correct namespace to sap.ui.require.toUrl
I'm building a chrome devtools extension with TypeScript + React
My Steps
loaded unpacked dist on chrome://extensions
open a new tab with devtools page(and the window alerts "this is content script")
clicked my extension panel
the error appears on chrome://extensions
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
Context
devtools://devtools/bundled/devtools_app.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/#a6b12dfad6663f13a7e16e9a42a6a4975374096b/&can_dock=true&dockSide=undocked
Stack Trace
index.html:0 (anonymous function)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
<link href="/static/css/sidebar.2001c5a3.chunk.css" rel="stylesheet">
<link href="/static/css/devtools.2001c5a3.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/static/js/runtime-index.d09d0bdd.js"></script>
<script src="/static/js/index.chunk.js"></script>
<script src="/static/js/runtime-sidebar.7a085c24.js"></script>
<script src="/static/js/0.chunk.js"></script>
<script src="/static/js/sidebar.chunk.js"></script>
<script src="/static/js/runtime-devtools.f0ac3d91.js"></script>
<script src="/static/js/devtools.chunk.js"></script>
<script src="/static/js/runtime-background.c42f91dc.js"></script>
<script src="/static/js/background.chunk.js"></script>
<script src="/static/js/runtime-contentScript.7cf7a071.js"></script>
<script src="/static/js/contentScript.chunk.js"></script>
</body>
</html>
But if I click the "inspect views background page` manually before step 2, everything works well.
I think the background should start up automatically in production. Did I miss something?
index.tsx
chrome.devtools.panels.create("Garbanzo",
"favicon.ico",
"devtools.html",
function (panel) {
// code invoked on panel creation
let backgroundPageConnection: chrome.runtime.Port
panel.onShown.addListener(function (window) {
// when the user switches to the panel, check for an elements tab
// selection
backgroundPageConnection = chrome.runtime.connect({
name: "devtools-page"
});
});
panel.onHidden.addListener(function () {
backgroundPageConnection.disconnect()
});
}
);
contentScript.chunk.js
alert("this is content script")
background.chunk.js
chrome.runtime.onConnect.addListener((port) => {
alert("OK");
})
manifest.json
{
...
"devtools_page": "index.html",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"static/js/content_script.js"
]
}
],
"background": {
"scripts": [
"static/js/background.js"
],
"persistent": true
},
"permissions": [
"storage",
"declarativeContent",
"tabs",
"activeTab",
"http://*/*",
"https://*/*"
],
...
}
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.
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!!!
'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>