I have a Input component:
<Input
value=""
showSuggestion="true"
showValueHelp="true"
valueHelpOnly="true"
valueHelpRequest="handleValueLocalHelp"
suggestionItemSelected="onLiveChangeSimple"
/>
and this is my function:
onLiveChangeSimple: function (oEvent) {
console.log("OK!")
},
When I clik on the input I show the suggestion items in a Help Diaolog; then I select one item and the Input value change correctly but onLiveChangeSimple don't fire! Why?
If I modify the input in this mode:
<Input
value=""
liveChange="onLiveChangeSimple"
/>
onLiveChangeSimple start...
What is the event fired when I clik on an Item in a Help dialog?
It should fire just fine... but I noticed you haven't specified an aggregation suggestionItems in your Input control, are you managing things in a different way?
<Input
id="productInput"
type="Text"
placeholder="Enter Name ..."
showSuggestion="true"
suggestionItems="{/}"
suggestionItemSelected="suggestionItemSelected">
<suggestionItems>
<core:Item text="{name}" />
</suggestionItems>
</Input>
See the below working example of how the suggestionItemSelected event is fired:
jQuery.sap.require("sap.m.MessageBox");
sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
var aData = [
{name: "Dente, Al", userid: "/c01/b2/u3/u44"},
{name: "Friese, Andy", userid: "/a01ss/a2/u3/u44"},
{name: "Mann, Anita", userid: "/U013333/u2/u3/u44"},
{name: "Schutt, Doris", userid: "/U01/u2/u3/u44"},
{name: "Open, Doris", userid: "/U01/u2/u3/u44"},
{name: "Dewit, Kenya", userid: "/U01/u2/u3/u44"},
{name: "Zar, Lou", userid: "/U01/bu2/u3/u44"},
{name: "Burr, Tim", userid: "U08"},
{name: "Hughes, Tish", userid: "U09"},
{name: "Town, Mo", userid: "U10"},
{name: "Case, Justin", userid: "U11"},
{name: "Time, Justin", userid: "U12"},
{name: "Barr, Sandy", userid: "U13"},
{name: "Poole, Gene", userid: "U14"},
{name: "Ander, Corey", userid: "U15"},
{name: "Early, Brighton", userid: "U16"},
{name: "Noring, Constance", userid: "U17"},
{name: "O'Lantern, Jack", userid: "U18"},
{name: "Tress, Matt", userid: "U19"},
{name: "Turner, Paige", userid: "U20"}
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(aData);
this.getView().setModel(oModel);
},
suggestionItemSelected: function(oEvent) {
sap.m.MessageBox.show("Selected " + oEvent.getParameter("selectedItem").getBindingContext().getObject().name);
}
});
var oView = sap.ui.xmlview({
viewContent: jQuery("#view1").html()
});
oView.placeAt("uiArea");
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>SAPUI5 template</title>
<style>
.sapUiUfdShellBackground, .sapMGlobalBackgroundColor {
background-color: transparent !important;
background-image: none !important;
}
.sapMShellGlobalInnerBackground {
background-image: none !important;
}
</style>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<script id="view1" type="ui5/xmlview">
<mvc:View
height="100%"
controllerName="view1.initial"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m">
<Input
id="productInput"
type="Text"
placeholder="Enter Name ..."
showSuggestion="true"
suggestionItems="{/}"
suggestionItemSelected="suggestionItemSelected">
<suggestionItems>
<core:Item text="{name}" />
</suggestionItems>
</Input>
</mvc:View>
</script>
</head>
<body class="sapUiBody" role="application">
<div id="uiArea"></div>
</body>
</html>
The problem is where I insert the item options. I not use suggestionItems aggregation but SelectDialog https://openui5.hana.ondemand.com/explored.html#/entity/sap.m.SelectDialog/samples
Related
i am showing a table of picture in the page
var oTemp = new sap.m.ColumnListItem({
vAlign: "Middle",
cells: [
new sap.m.VBox({
items: [
new sap.m.Image({
src: {
path: "myModel>ImageLink",
},
densityAware:false,
decorative: false,
error: function(oEvent) {
this.setSrc(oEvent.getSource().getProperty("src"));
}
})
]
})
]
});
otable.bindItems({
path: "myModel>/Images",
template: oTemp
});
znd in xml
<m:Table id="imageTable">
<m:headerToolbar>
<m:OverflowToolbar>
<m:Title text="some text"/>
</m:OverflowToolbar>
</m:headerToolbar>
<m:columns>
<m:Column>
</m:Column>
</m:columns>
</m:Table>
and it always enter in the error function despite in the debugger the image is l but once i open the image elsewhere the images are loaded perfectly
Will this help? http://jsbin.com/xusikeh/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<style type="text/css">
.sapMObjLTitle {
cursor: pointer;
}
</style>
<!-- XML-based view definition -->
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:m="sap.m">
<m:Table id="imageTable">
<m:headerToolbar>
<m:OverflowToolbar>
<m:Title text="some text" />
</m:OverflowToolbar>
</m:headerToolbar>
<m:columns>
<m:Column>
</m:Column>
</m:columns>
</m:Table>
</mvc:View>
</script>
<script>
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/m/ColumnListItem',
'sap/m/VBox',
'sap/m/Image'
], function(jQuery, Controller, JSONModel, ColumnListItem, VBox, Image) {
return Controller.extend("myView.Template", {
onInit: function(oEvent) {
var oView = this.getView();
var oTable = oView.byId("imageTable");
oTable.bindItems({
path: "myModel>/Images",
template: new ColumnListItem({
vAlign: "Middle",
cells: new sap.m.VBox({
items: new Image({
src: '{myModel>ImageLink}',
densityAware:false,
decorative: false
})
})
})
});
oView.setModel(new JSONModel({
Images: [{
ImageLink: "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
}]
}), "myModel");
}
});
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody">
<div id='content'></div>
</body>
</html>
I need to open the data from a .phtml file (gallery.phtml) in a modal popup in Magento2. This is the code used to include modal scripts:
<div>
Click Me
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
content: 'gallery.phtml',
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>
The gallery.phtml file is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="popup-mpdal">
<h1> Hi I'm here.... </h1>
</div>
</body>
</html>
But the popup is not coming.
I got the answer:
<div>
Click Me
</div>
<div id="popup-mpdal" >
<?php include ($block->getTemplateFile('Vendor_Module::gallery.phtml')) ?>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-mpdal'));
$("#click-me").on('click',function(){
$("#popup-mpdal").modal("openModal");
});
}
);
</script>
I have used this in html
<button type="button" class="action" data-trigger="trigger">
<span data-bind="i18n: 'Click Here'"></span>
</button>
<div data-bind="mageInit: {
'Magento_Ui/js/modal/modal':{
'type': 'popup',
'title': 'Popup title',
'trigger': '[data-trigger=trigger]',
'responsive': true,
'buttons': [{
text: 'Submit',
class: 'action'
}]
}}">
<div class="content">
Popup Content
</div>
</div>
A select element is a dropdown list in which an option may be selected.
The select element has the selectedItem which is a handle to the currently selected item. A selected item has a key that I bind to an identifying attribute in my JSON model.
Using an XML view declaration, I can use the change() event to fire code in the controller.
In the change() event how can I get the binding path of the selectedItem without having to search the model to match the key?
This is what I intuited but the second line throws an error.
onListSelect : function(event) {
console.log(event.oSource.getSelectedItem().getKey()) // works ok
var path = event.oSource.getSelectedItem().getBindingContext().getPath(); // Fails
}
EDIT: In response to input & comments I added the snippet to isolate the issue. In the course of doing so I find that there is no issue. The snippet works. Must have been my own mistake.
I shall erase the question shortly.
// JSON sample data
var data = {
"peeps": [
{className: "Coding 101", id: 100, firstName: "Alan", lastName: "Turing"},
{className: "Coding 101", id: 400, firstName: "Ada", lastName: "Lovelace"},
{className: "Combat 101", id: 300, firstName: "D", lastName: "Trump"},
{className: "Combat 101", id: 700, firstName: "Spartacus", lastName: ""},
{className: "Combat 101", id: 900, firstName: "Tasmanian", lastName: "Devil"}
]
};
sap.ui.getCore().attachInit(function() {
"use strict";
sap.ui.controller("MyController", {
onInit: function() {
// create JSON model instance
var oModel = new sap.ui.model.json.JSONModel();
// set the data for the model
oModel.setData(data);
// set model to core.
sap.ui.getCore().setModel(oModel);
},
onListSelect : function(event) {
console.log(event.getSource().getSelectedItem().getKey()); // works ok
var path = event.getSource().getSelectedItem().getBindingContext().getPath(); // Fails
console.log("Path=" + path)
var oModel = sap.ui.getCore().getModel()
var theName = oModel.getProperty(path)
console.log("You selected " + theName.lastName)
}
});
sap.ui.xmlview({
viewContent: jQuery("#myView").html()
}).placeAt("content");
});
<!DOCTYPE html>
<title>SAPUI5</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>
<script id="myView" type="ui5/xmlview">
<mvc:View controllerName="MyController" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:layout="sap.ui.commons.layout" xmlns:f="sap.ui.layout.form">
<Select id="theList" forceSelection="false" wisth="auto" change="onListSelect" items="{
path: '/peeps',
sorter: { path: 'lastName' }
}" class="sapUiResponsiveMargin">
<core:Item key="{id}" text="{lastName}" />
</Select>
</mvc:View>
</script>
<body class="sapUiBody">
<div id="content"></div>
</body>
Check following XML and JS code :
XML Code :
`<Select id="id_Select"
forceSelection="false"
selectedKey="{/Data/0/key}"
change="fnSelectChange"
items="{/Data}" >
<core:Item key="{key}" text="{name}" />
</Select>`
JS Code :
fnInputHandel : function(){
oSelectJSON = new sap.ui.model.json.JSONModel();
var Data = {
Data : [{
name : "name1",
key : "key1"
},{
name : "name2",
key : "key2"
}]
}
oSelectJSON.setData(Data);
this.getView().byId("id_Select").setModel(oSelectJSON);
},
fnSelectChange : function(oEvent){
var value = oEvent.oSource.getSelectedItem().getBindingContext().getPath();
},
<template is="dom-repeat" items="[[routes]]">
<div>{{item.color}} | {{item.Index}}</div>
<google-map-directions id="{{item.name}}"
renderer-options='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="DRIVING"
waypoints='[{"location": "Palo Alto"}, {"location": "San Mateo"}]'>
</google-map-directions>
<div id="dirt"></div>
</template>
I am creating some routes using dom-repeat. I would like these routes to have different colors. They don't. It seems as if each route is using the same renderer. How can I change the renderer for each route?
It turns out the only missing piece in your code is one character for the attribute-binding.
In order for the compound binding to be deserialized into a JSON object, the following is required:
attribute-binding syntax (i.e., $=) even though binding to a property
Single-quotes around the value instead of double-quotes
the target property must be of type Object (which is true for <google-map-directions>.rendererOptions)
// template
<google-map-directions map="[[map]]"
renderer-options$='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
... >
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
google-map {
height: 600px;
}
</style>
<template>
<google-map map="{{map}}" latitude="37.779"
longitude="-122.3892"></google-map>
<template is="dom-repeat" items="{{routes}}">
<google-map-directions map="[[map]]"
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="BICYCLING"
renderer-options$='{"draggable":true,"polylineOptions":{"draggable":true,"strokeColor":"{{item.color}}"},"routeIndex":1}'
waypoints="{{item.waypoints}}"></google-map-directions>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties: {
routes: {
type: Array,
value: function() {
return [
{
color: '#0000FF',
startAddress: 'San Francisco',
endAddress: 'Mountain View',
waypoints: [{location: 'Palo Alto'}, {location: 'San Mateo'}]
},
{
color: '#FF0000',
startAddress: 'Oakland',
endAddress: 'San Jose',
waypoints: [{location: 'Pleasanton'}, {location: 'Union City'}]
},
];
}
}
}
});
});
</script>
</dom-module>
</body>
codepen
Alternatively, you could use a computed binding that returns the appropriate renderer options based on a given color and route index:
// template
<google-map-directions map="[[map]]"
renderer-options="{{_getRendererOptions(item.color, index)}}"
... >
// script
Polymer({
...
_getRendererOptions: function(strokeColor, index) {
return {
draggable: true,
polylineOptions: {
draggable: true,
strokeColor: strokeColor,
routeIndex: index
}
};
}
});
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-directions.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<style>
google-map {
height: 600px;
}
</style>
<template>
<google-map map="{{map}}" latitude="37.779"
longitude="-122.3892"></google-map>
<template is="dom-repeat" items="{{routes}}">
<google-map-directions map="[[map]]"
start-address="{{item.startAddress}}"
end-address="{{item.endAddress}}"
travel-mode="BICYCLING"
renderer-options="{{_getRendererOptions(item.color, index)}}"
waypoints="{{item.waypoints}}"></google-map-directions>
</template>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties: {
routes: {
type: Array,
value: function() {
return [
{
color: '#0000FF',
startAddress: 'San Francisco',
endAddress: 'Mountain View',
waypoints: [{location: 'Palo Alto'}, {location: 'San Mateo'}]
},
{
color: '#FF0000',
startAddress: 'Oakland',
endAddress: 'San Jose',
waypoints: [{location: 'Pleasanton'}, {location: 'Union City'}]
},
];
}
}
},
_getRendererOptions: function(strokeColor, index) {
return {
draggable: true,
polylineOptions: {
draggable: true,
strokeColor: strokeColor,
routeIndex: index
}
};
}
});
});
</script>
</dom-module>
</body>
codepen
I am building my first hybrid app with Ionic, and there is something I do not understand.
What is the use of ion-nav-view.
I explain: I have an app with "nav-tabs". Here is the code of a nav-tab:
<ion-tab title="Contacts" icon="icon-users" href="#/tab/contacts">
<ion-nav-view name="tab-contacts"></ion-nav-view>
</ion-tab>
Everything is OK here.
So now, my list of contacts is a list which goes like this:
<ion-item href="#/tab/contacts/{{contact.id}}" ng-repeat="contact in contacts | orderBy:'name'">
{{contact.name}}
</ion-item>
Here is my problem: I have configured a route for '/tab/contacts/:id', and a view. The problem is: where should I put the equivalent of the "ion-nav-view" directive, so that my view is actually shown when I click?
Thank you!
I think the best answer is a working example similar to what you want to do.
However <ion-nav-view> must be in your index.html and it is where the route/state manager will put the templates of your views. The templates have another directive, <ion-view>, which wraps all other directives and content of the view.
Check the snippet below:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'views/tabs.html'
})
.state('tabs.contacts', {
url: '/contacts',
views: {
'tab-contacts': {
templateUrl: 'views/contacts.html',
controller: 'contactsCtrl',
resolve: {
allcontacts: function(Contacts) {
console.log("resolve allcontacts");
return Contacts.all();
}
}
}
}
})
.state('tabs.detail', {
url: '/detail/:id',
views: {
'tab-detail': {
templateUrl: 'views/detail.html',
controller: 'detailCtrl',
resolve: {
contact: function($stateParams, Contacts) {
return Contacts.get($stateParams.id);
}
}
}
}
});
$urlRouterProvider.otherwise("/tab/contacts");
})
.controller('contactsCtrl', function($scope, $ionicLoading, $ionicPopover, $ionicPopup, $compile, $http, allcontacts) {
console.log("contactsCtrl");
$scope.contacts = allcontacts;
})
.controller('detailCtrl', function($scope, contact, $ionicHistory) {
$scope.contact = contact;
console.log("detailCtrl", contact);
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
})
.factory('Gravatar', function() {
return {
getUrl: function(s){
return "https://secure.gravatar.com/avatar/"+CryptoJS.MD5(""+Math.random())+"?d=identicon&s="+s;
}
}
})
.factory('Contacts', function($http, $q, $timeout, Gravatar) {
var contacts = [];
return {
all: function(){
var dfd = $q.defer();
//$http.get('../data/contacts.json').then(function(response){
$timeout(function() {
//contacts = response.data;
contacts = [{
id: 1,
name: "William",
surname: "Hayes",
fullname: "Grace Beatty",
image: Gravatar.getUrl(128)
}, {
id: 2,
name: "James",
surname: "Jennings",
fullname: "Hilda Gross",
image: Gravatar.getUrl(128)
}, {
id: 3,
name: "Judith",
surname: "Silverman",
fullname: "Bruce Kern",
image: Gravatar.getUrl(128)
}, {
id: 4,
name: "Greg",
surname: "Fitzpatrick",
fullname: "Heather Bowers",
image: Gravatar.getUrl(128)
}, {
id: 5,
name: "Teresa",
surname: "McLean",
fullname: "Leon Baker",
image: Gravatar.getUrl(128)
}, {
id: 6,
name: "Emily",
surname: "Lassiter",
fullname: "Virginia Pittman",
image: Gravatar.getUrl(128)
}, {
id: 7,
name: "Don",
surname: "Sinclair",
fullname: "Ashley Richards",
image: Gravatar.getUrl(128)
}, {
id: 8,
name: "Hazel",
surname: "Livingston",
fullname: "Gloria O",
image: Gravatar.getUrl(128)
}, {
id: 9,
name: "Regina",
surname: "Braun",
fullname: "Monica Casey",
image: Gravatar.getUrl(128)
}, {
id: 10,
name: "Leroy",
surname: "Pritchard",
fullname: "Gretchen Sharpe",
image: Gravatar.getUrl(128)
}];
//console.log(contacts);
dfd.resolve(contacts);
console.log("contacts.all");
});
return dfd.promise;
},
get: function(id) {
for (var i = 0; i < contacts.length; i++) {
if (contacts[i].id == id) {
return contacts[i];
}
}
return null;
}
}
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic detail view</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="views/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Contacts" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/contacts">
<ion-nav-view name="tab-contacts"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact detail" icon-off="ion-ios-person-outline" icon-on="ion-ios-person href="#/tab/detail">
<ion-nav-view name="tab-detail"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="views/contacts.html" type="text/ng-template">
<ion-view title="Contacts">
<ion-content>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="contact in contacts" ui-sref="tabs.detail({ id: contact.id })">
<img ng-src="{{ contact.image }}" />
<h2>{{ contact.name }}</h2>
<p>{{ contact.fullname }}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script id="views/detail.html" type="text/ng-template">
<ion-view title="Contact detail">
<ion-nav-buttons side="left">
<button class="button button-clear" ng-click="myGoBack()" >
<i class="icon ion-ios-arrow-back"></i>
Back</button>
</ion-nav-buttons>
<ion-content>
<ion-item class="list-item">
<img ng-src="{{ contact.image }}" alt="{{ contact.name }}" />
<div class="list-details">
<p class="sub-heading"><b>Name:</b> {{ contact.name }}</p>
<p><b>Surname:</b> {{ contact.surname }}</p>
<p><b>Fullname:</b> {{ contact.fullname }}</p>
</div>
</ion-item>
</ion-content>
</ion-view>
</script>
</body>
</html>