How to pass selected Value form Popup to normal controller page in ionic framework
`$scope.showprofpopup = function()
{
$scope.data = {}
var myPopup = $ionicPopup.show
({
templateUrl: 'templates/popover.html',
title: 'Please Choose Category',
scope: $scope,
buttons: [ { text : 'Cancel' }, { text: 'Select', type: 'button-dark', onTap: function(e) { return $scope.data; } }, ]
});
myPopup.then(function(res)
{
//$scope.create(res.category);
//$state.go('app.userdetails');
//$scope.contactMessage = { text: res };
if(!res.category)
{
$ionicLoading.show({ template: '<ion-spinner icon="android"></ion-spinner>', animation: 'fade-in', showBackdrop: true, maxWidth: 100,showDelay: 50 });
$scope.showprofpopup();
$timeout(function () { $ionicLoading.hide(); }, 3000);
//$ionicPopup.alert({ title: "Please Choose Category" });
}
else
{
$scope.SelectedProfessional = { text: res.category};
//alert(res.category);
$state.go('app.userdetails');
}
});
};`
I want to send the result re.category to app.userdetails page.kindly anyone help me.
using $stateParams
$state.go('app.userdetails',{'category': res.category});
Related
This is a custom control created for my previous question Custom font for currency signs
I have two span elements coming next to each other. They sit in the FormattedText. The FormattedText itself sits in the HBox.
I want popover fired when user mouses over/out from the hbox. Unfortunately, as I have 2 spans this fires separately when user hovers overs them (thus showing 2 separate popovers, when in fact it should be one). My assumption is that this causes because onmouseover/out is attached to both spans under the hood. Can I restrict these events to hbox only?
sap.ui.define([
'sap/ui/core/Control',
'sap/m/FormattedText',
'sap/m/HBox',
], function (Control, FormattedText, HBox) {
return Control.extend('drex.control.TherapyCosts', {
metadata: {
properties: {
rank: {
type: 'int',
defaultValue: 0
},
},
aggregations: {
_rankedTherapyCost: {type: 'sap.m.FormattedText', multiple: false, singularName: '_rankedTherapyCost'},
_popover: {type: 'sap.m.Popover', multiple: false, singularName: '_popover'},
_hbox: {type: 'sap.m.HBox', multiple: false}
}
},
init: function () {
Control.prototype.init.apply(this, arguments);
},
onBeforeRendering: function () {
const highlighedCurrency = this.getCurrency().repeat(this.getRank());
const fadedCurrency = this.getCurrency().repeat(7 - this.getRank());
const _popover = new sap.m.Popover({
showHeader: false,
placement: 'VerticalPreferredBottom',
content: new sap.m.Text({text: 'test'})
});
this.setAggregation('_popover', _popover);
const _formattedText = new FormattedText({
htmlText:
`<span class="currencyHighlighted">${highlighedCurrency}</span>` +
`<span class="currencyFaded">${fadedCurrency}</span>`
});
this.setAggregation('_rankedTherapyCost', _formattedText);
const _hbox = new HBox(
{ items: [this.getAggregation('_rankedTherapyCost')]})
.addEventDelegate({
onmouseover: () => {
this.getAggregation('_popover').openBy(this);
},
onmouseout: () => {
this.getAggregation('_popover').close()
}
});
this.setAggregation('_hbox', _hbox)
},
renderer: function (rm, oControl) {
const _hbox = oControl.getAggregation('_hbox');
rm.write('<div');
rm.writeControlData(oControl);
rm.write('>');
rm.renderControl(_hbox);
rm.write('</div>');
}
});
});
Here is the video of the issue
https://streamable.com/fjw408
The key here is the mouseout event is triggered when the mouse moves out of any child element of the element that is listening for the event. In this case, for example, moving from the emphasised text to the faded text, you get a mouseout event when moving off the emphasised text, which closes the popup, then a mouseover event on the faded text which opens it again.
Since you opening an already open popup doesn't do anything, you only need add a line on mouseout to inspect the element that you've gone to. If it is not a child of the current element, only then close the popover.
if (!this.getDomRef().contains(e.toElement)) {
popOver.close()
}
Building on D.Seah's answer, I've added this to the JSBin. I personally don't like using onBeforeRendering and onAfterRendering like this, so I've refactored a little to construct everything on init and simply change the controls on property change. This way, you're doing less on rendering for performance reasons.
sap.ui.define([
'sap/ui/core/Control',
'sap/m/FormattedText',
], function (Control, FormattedText) {
Control.extend('TherapyCosts', {
metadata: {
properties: {
rank: {
type: 'int',
defaultValue: 0
},
currency: {
type: "string",
defaultValue: "$"
}
},
aggregations: {
_highlighted: {type: 'sap.m.FormattedText', multiple: false},
_faded: {type: 'sap.m.FormattedText', multiple: false},
_popover: {type: 'sap.m.Popover', multiple: false, singularName: '_popover'}
}
},
init: function () {
Control.prototype.init.apply(this, arguments);
this.addStyleClass('therapy-cost');
const highlight = new FormattedText();
highlight.addStyleClass("currency-highlight");
this.setAggregation('_highlighted', highlight);
const faded = new FormattedText();
faded.addStyleClass("currency-faded");
this.setAggregation('_faded', faded);
const _popover = new sap.m.Popover({
showHeader: false,
placement: 'VerticalPreferredBottom',
content: new sap.m.Text({text: 'test'})
});
this.setAggregation('_popover', _popover);
},
_changeAggr: function () {
const highlighedCurrency = this.getCurrency().repeat(this.getRank());
const highlight = this.getAggregation("_highlighted");
highlight.setHtmlText(highlighedCurrency);
const fadedCurrency = this.getCurrency().repeat(7 - this.getRank());
const faded = this.getAggregation("_faded");
faded.setHtmlText(fadedCurrency);
},
setRank: function(rank) {
if (this.getProperty("rank") !== rank) {
this.setProperty("rank", rank);
this._changeAggr();
}
},
setCurrency: function(curr) {
if (this.getProperty("currency") !== curr) {
this.setProperty("currency", curr);
this._changeAggr();
}
},
renderer: function (rm, oControl) {
rm.write('<div');
rm.writeControlData(oControl);
rm.writeClasses(oControl);
rm.writeStyles(oControl);
rm.write('>');
rm.renderControl(oControl.getAggregation('_highlighted'));
rm.renderControl(oControl.getAggregation('_faded'));
rm.write('</div>');
},
onmouseover: function (e) {
const popOver = this.getAggregation('_popover');
popOver.openBy(this);
},
onmouseout: function (e) {
if (!this.getDomRef().contains(e.toElement)) {
const popOver = this.getAggregation('_popover');
popOver.close();
}
}
});
(new TherapyCosts({
rank: 5,
currency: "£"
})).placeAt('content')
});
.therapy-cost {
display: inline-flex;
flex-direction: row;
}
.therapy-cost .currency-highlighted {
color: black;
}
.therapy-cost .currency-faded {
color: lightgrey;
}
<!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>
</head>
<body class="sapUiBody sapUiSizeCompact">
<div id='content'></div>
</body>
</html>
https://jsbin.com/gukedamemu/3/edit?css,js,output
i think you can do without the hbox; by just having two formatted text or any sapui5 controls will be ok too.
sap.ui.define([
'sap/ui/core/Control',
'sap/m/FormattedText',
], function (Control, FormattedText) {
Control.extend('TherapyCosts', {
metadata: {
properties: {
rank: {
type: 'int',
defaultValue: 0
},
currency: {
type: "string",
defaultValue: "$"
}
},
aggregations: {
_highlighted: {type: 'sap.m.FormattedText', multiple: false},
_faded: {type: 'sap.m.FormattedText', multiple: false},
_popover: {type: 'sap.m.Popover', multiple: false, singularName: '_popover'}
}
},
init: function () {
Control.prototype.init.apply(this, arguments);
this.addStyleClass('therapy-cost')
},
onBeforeRendering: function () {
const highlighedCurrency = this.getCurrency().repeat(this.getRank());
const highlight = new FormattedText({
htmlText: highlighedCurrency
});
this.setAggregation('_highlighted', highlight);
const fadedCurrency = this.getCurrency().repeat(7 - this.getRank());
const faded = new FormattedText({
htmlText: fadedCurrency
});
this.setAggregation('_faded', faded);
const _popover = new sap.m.Popover({
showHeader: false,
placement: 'VerticalPreferredBottom',
content: new sap.m.Text({text: 'test'})
});
this.setAggregation('_popover', _popover);
},
renderer: function (rm, oControl) {
rm.write('<div');
rm.writeControlData(oControl);
rm.writeClasses(oControl);
rm.writeStyles(oControl);
rm.write('>');
rm.renderControl(oControl.getAggregation('_highlighted'));
rm.renderControl(oControl.getAggregation('_faded'));
rm.write('</div>');
},
onAfterRendering: function () {
const popOver = this.getAggregation('_popover');
const highlighted = this.getAggregation("_highlighted");
highlighted.$().addClass("currency-highlighted");
highlighted.$().hover(function() {
popOver.openBy(highlighted);
}, function() {
popOver.close();
});
const faded = this.getAggregation("_faded");
faded.$().addClass("currency-faded");
},
});
(new TherapyCosts({
rank: 5
})).placeAt('content')
});
https://jsbin.com/razebuq/edit?css,js,output
The idea is to have a HBox container under the MultiComboBox control to which selected tokens will be pushed. I have followed different tutorials and couldn't get a success. A multiComboBox is simply now shown.
The idea:
Simplified (testing) implementation of custom control:
sap.ui.define([
'sap/m/MultiComboBox',
'sap/m/HBox'
], function (MultiComboBox, HBox) {
'use strict';
/**
* Constructor for a new MultiCombobox with tokens.
*/
return MultiComboBox.extend('drex.control.DropDownWithTags', {
metadata: {
aggregations: {
_tokensContainer: { type: 'sap.m.HBox', multiple: false }
},
},
init: function () {
MultiComboBox.prototype.init.apply(this, arguments);
this.setAggregation('_tokensContainer', new HBox());
},
_addToken: function () {
this.getAggregation('_tokensContainer').insertItem({text: 'test'});
},
_handleSelectionLiveChange: function(oControlEvent) {
this._addToken();
MultiComboBox.prototype._handleSelectionLiveChange.apply(this, arguments);
},
renderer: function (rm, DropDownWithTags) {
rm.write('<div');
rm.writeControlData(DropDownWithTags);
rm.write('>');
rm.renderControl(DropDownWithTags.getAggregation('_tokensContainer'));
rm.write('</div>');
}
});
});
XML (no change, except for a name, could that be a problem?). Adding HBox aggregation to it does not help.
<drex:DropDownWithTags
items="{
path: 'diseaseList>/allDiseases'
}"
selectedKeys="{filterModel>/disease}"
selectionFinish="onSelectDisease">
<core:Item key="{diseaseList>id}" text="{diseaseList>Name}"/>
</drex:DropDownWithTags>
Any idea why it happens ? I cannot see my mistake.
there are many ways to do this. here is one way
sap.ui.define([
'sap/ui/core/Control',
'sap/ui/core/Item',
'sap/m/MultiComboBox',
'sap/m/HBox',
'sap/m/Text'
], function (Control, Item, MultiComboBox, HBox, Text) {
Control.extend('DropDownWithTags', {
metadata: {
aggregations: {
combo: { type: 'sap.m.MultiComboBox', multiple: false },
_hbox: { type: 'sap.m.HBox', multiple: false }
},
},
init: function () {
Control.prototype.init.apply(this, arguments);
this.setAggregation('_hbox', new HBox({
items: [
]
}));
},
renderer: function (rm, oControl) {
rm.write('<div');
rm.writeControlData(oControl);
rm.write('>');
rm.write('<div>');
rm.renderControl(oControl.getAggregation('combo'));
rm.write('</div>');
rm.write('<div>');
rm.renderControl(oControl.getAggregation('_hbox'));
rm.write('</div>');
rm.write('</div>');
},
onAfterRendering: function() {
var combo = this.getAggregation('combo')
var hbox = this.getAggregation('_hbox');
combo.attachEvent("selectionChange", function() {
hbox.destroyItems();
var text = this.getSelectedItems().map(function(item) {
return item.getText();
});
if (text.length > 0) {
hbox.addItem(new Text({ text: text.join(",")}))
}
})
}
});
var combo = new DropDownWithTags({
combo: new MultiComboBox({
items: [
new Item({
key: "test",
text: "test"
}),
new Item({
key: "test1",
text: "test1"
})
]
})
});
combo.placeAt("content")
});
I have an ionicPopup like so:
function editNotifications() {
var popUp = $ionicPopup.show({
template: '<ion-checkbox ng-repeat="item in vm.notifications" ng-model="item.notification" ng-checked="item.notification">' +
'<span class="notificationsFont">{{item.settingsText}}</span></ion-checkbox>',
title: 'Notification Settings',
scope: $scope,
buttons: [
{
text: 'Cancel',
onTap: function(e) {
vm.notifications = localStorageManager.get('notificationStatus');
}
},
{
text: '<b>Ok</b>',
type: 'button-positive',
onTap: function(e) {
localStorageManager.set('notificationStatus', vm.notifications);
vm.notificationText = "Notifications off";
setNotificationValuesBasedOnUserInput(vm.notifications);
}
}]
});
};
Here is what I have so far;
it('Should edit notifications', function() {
spyOn($ionicPopup, 'show').and.callFake(function() {
return $q.resolve(true);
})
spyOn(localStorageManager, 'set');
controller = createController();
controller.editNotifications();
$scope.$apply();
expect(localStorageManager.set).toHaveBeenCalled();
// expect(localStorageManager.set).toHaveBeenCalledWith('notificationStatus');
});
I basically have no idea how to test this thing. There doesn't seem to be much on the internet. I would think I need to do something in my callFake function but I'm a bit stuck. Anyone ever successfully tested this beast before?
Go through this answer: https://stackoverflow.com/a/52565500/7943457
And modify your code something like this:
function editNotifications() {
var popUp = $ionicPopup.show({
template: '<ion-checkbox ng-repeat="item in vm.notifications" ng-model="item.notification" ng-checked="item.notification">' +
'<span class="notificationsFont">{{item.settingsText}}</span></ion-checkbox>',
title: 'Notification Settings',
scope: $scope,
buttons: [
{
text: 'Cancel',
onTap: function(e) {
return false;
}
},
{
text: '<b>Ok</b>',
type: 'button-positive',
onTap: function(e) {
return true;
}
}]
});
popup.then(function(response){
if(response){ //when response is true
localStorageManager.set('notificationStatus', vm.notifications);
vm.notificationText = "Notifications off";
setNotificationValuesBasedOnUserInput(vm.notifications);
}else{ //when response is false
vm.notifications = localStorageManager.get('notificationStatus');
}
})
};
You can test it like this:
it('Should edit notifications', function() {
spyOn($ionicPopup, 'show').and.callFake(function() {
return $q.resolve(true);
})
spyOn(localStorageManager, 'set');
controller = createController();
controller.editNotifications();
$scope.$apply();
expect(localStorageManager.set).toHaveBeenCalled();
// expect(localStorageManager.set).toHaveBeenCalledWith('notificationStatus');
});
it('Should get notifications', function() {
spyOn($ionicPopup, 'show').and.callFake(function() {
return $q.resolve(false);
})
spyOn(localStorageManager, 'get');
controller = createController();
controller.editNotifications();
$scope.$apply();
expect(localStorageManager.get).toHaveBeenCalled();
// expect(localStorageManager.get).toHaveBeenCalledWith('notificationStatus');
});
Hope it helps.
View1.Controller.js
onClickRUSSIA: function() {
var dialog = new Dialog({
title: 'Default Message',`enter code here`
type: 'Message',
content: new Text({
text: 'Country : RUSSIA \n Contenent : ASIA \n language:RUSSIAN.'
}),
beginButton: new Button({
text: 'OK',
press: function() {
dialog.close();
}
}),
endButton: new Button({
text: 'More Info',
press: function() {
//this.getRouter().navTo("mohan");
var router = sap.ui.core.UIComponent.getRouterFor();
router.navTo("View2");
}
}),
afterClose: function() {
dialog.destroy();
}
});
dialog.open();
},
Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"Test1/model/models"
], function(UIComponent, Device, models) {
"use strict";
return UIComponent.extend("Test1.Component", {
metadata: {
//rootView: "test1.webapp.view.App",
manifest: "json",
routing: {
config: {
viewType: "XML",
viewPath: "test1.webapp.view",
controlId: "rootControl",
controlAggregation: "pages",
//routerClass: "Test1.controller",
transition: "slide"
},
routes: [
{
pattern: "",
name: "default",
view: "view1"
}, {
pattern: "mohan",
name: "view2",
View: "view2"
}
]
// targets: {
// page1: {
// viewName: "View1",
// viewLevel: 0
// },
// page2: {
// viewName: "View2",
// viewLevel: 1
// }
// }
}
},
init: function() {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
jQuery.sap.require("sap.ui.core.routing.HashChanger");
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
this._router = this.getRouter();
// set the device model
this.setModel(models.createDeviceModel(), "device");
//initlialize the router
this._routeHandler = new sap.m.routing.RouteMatchedHandler(this._router);
this._router.initialize();
}
});
});
You will have to get the router for your controller/view. As this is not your controller inside endButton.press(), you have to use a helper variable that.
You have to give Router.navTo() the name of the route to navigate to. So it has to be view2 instead of View2.
var that = this;
var dialog = new Dialog({
...
endButton: new Button({
text: 'More Info',
press: function() {
var router = sap.ui.core.UIComponent.getRouterFor(that);
router.navTo("view2");
}
}),
...
this.getOwnerComponent().getTargets().display("page1");
Hey I am working with bootstrap modal and calling it in angularjs. Its working good. Only the problem is that how can I route modal in angularjs routing. My Code:
Inside Controller
var modalInstance = $modal.open({
templateUrl: 'webpages/home/loginModal.html'
});
modalInstance.result.then(function () {
}, function () {
});
Inside Routing
.when('/login', {
templateUrl: function($routeParams) {
return 'sitepages/home/home.html';
},
controller: 'PageViewController',
reloadOnSearch: false
})
Its just example of routing how I am doing it, I need to find routing for modal.
You can use states for this purposes
$stateProvider.state("items.add", {
url: "/add",
onEnter: ['$stateParams', '$state', '$modal', '$resource', function($stateParams, $state, $modal, $resource) {
$modal.open({
templateUrl: "items/add",
resolve: {
item: function() { new Item(123).get(); }
},
controller: ['$scope', 'item', function($scope, item) {
$scope.dismiss = function() {
$scope.$dismiss();
};
$scope.save = function() {
item.update().then(function() {
$scope.$close(true);
});
};
}]
}).result.then(function(result) {
if (result) {
return $state.transitionTo("items");
}
});
}]
});
More details: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state
You don't need the routing for it
app.controller("ACtrl", ['$scope','$http', '$log', '$modal',
function($scope, http, $log, $modal){
$scope.OpenModel = function () {
var param = { appId: 1, price: 2.5 };
var modalInstance = $modal.open({
size: 'lg',
backdrop: 'static',
templateUrl: 'webpages/home/loginModal.html',
controller: 'modalCtrl',
resolve: {
data: function () { return param; }
}
});
modalInstance.result.then(function (response) {
//Do whatever you want to do with reponse
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
}
///Add your modal control here
app.controller("modalCtrl", ['$scope','$http', '$modalInstance', 'data',
function($scope, http, $modalInstance, data){
// rest of the code goes here
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
}