how to use fireEvent to set selection in icCube - iccube

I have a multiselect filter widget with members of a demension to use it as a filter in my mdx. This works fine by use #{filter) in mdx. As if the filter is per user unique I want to store it in a database and load it if an user logs in. This works fine and getting the filter as a JSON object:
data = [{
"servicenumbers": [{
"name": "+31880440723",
"uniquename": "[Inkomend nummer].[Inkomend nummer].[Nummer].&[76]&[2308]"
},
{
"name": "+31880440747",
"uniquename": "[Inkomend nummer].[Inkomend nummer].[Nummer].&[76]&[2329]"
},
{
"name": "+31880440758",
"uniquename": "[Inkomend nummer].[Inkomend nummer].[Nummer].&[76]&[3670]"
},
{
"name": "+31880440727",
"uniquename": "[Inkomend nummer].[Inkomend nummer].[Nummer].&[76]&[2312]"
}]
}]
In my javascriptcode I have a "fireEvent" event to actually set the filter. code:
function consumeEvent( context, event ) {
var $report = context.$report;
var fireEvent = context.fireEvent.bind(context);
...
some code
...
fireEvent('filter',buildEvent(data));
}
function buildEvent(sel)
{
return {
fireMdxByDefault: false,
isGlobalFilter_: true,
classID: viz.event.SetSelectionEvent,
constructor: function w(A,B,z){x.call(this,B,z);this.classID="viz.event.SetSelectionEvent";this.selection=A},
caption: function (){if(this.selection&&this.selection.length>0){return ic3.asMdxSet(this.selection,"name",false,true)}else{return""}},
asMdx: function (){if(this.selection&&this.selection.length>0){return ic3.asMdxSet(this.selection,"uniqueName")}else{return null}},
asFilterInitialSelection: function (){if(this.selection&&this.selection.length>0){return ic3.arrayProps(this.selection,"uniqueName")}else{return""}},
getSelectedItems: function (){return this.selection},
isSelectionEvent: function (){return true},
isGlobalFilter: function (){return this.isGlobalFilter_},
isEmptyEvent: function (){return false},
value: function (){return this.asMdx()},
asSet: function (){return this.asMdx().replace(/^\(/,"{").replace(/\)$/,"}")},
asDefaultValue: function (){return this.asFilterInitialSelection()},
asReportParam: function (){var H={};H.rpe=1;if(this.isEmptyEvent()){H.nil=true}else{var A=this.caption();if(A!==null){H.dft=A}var D=this.value();if(D!==null){H.val=D}var z=this.asMdx();if(z!==null){H.mdx=z}var x=this.asFilterInitialSelection();if(x!==null){H.fis=x}if(this.isSelectionEvent()){var B=this.getSelectedItems();if(B!==null){H.sel=B}}}return H},
selection: sel.servicenumbers
};
}
If I use "filter" in my MDX #{filter} the filter is applied in the query. But if I use it as a "do set Selection" in my filter widget it doesn't apply the selection and nothing is selected.
Does someone have a suggestion how to make this work?

Related

Formatter called multiple times or too soon with `undefined`

I'm using OpenUI5. Using the formatter.js, I have formatted some text in my view.
But my formatter is called 3 times:
When I bind the model to panel control: oPanel.setModel(oModel, "data");
both sBirthday and sFormat are undefined.
After onInit() is finished and the view is rendered:
sBirthday is valorized correctly and sFormat is undefined
Again: both sBirthday and sFormat ara valorized correctly.
Why does this happen? Is it correct?
The app get an error, because the ageDescription() in the formatter, can't manage undefined values.
formatter.js
sap.ui.define([], function () {
"use strict";
return {
ageDescription : function (sBirthday, sFormat) {
do.something();
var sFromMyBd = moment(sBirthday, sFormat).fromNow();
do.something();
return sAge;
}
}
});
main.view.xml
<mvc:View
controllerName="controller.main"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Panel id="user-panel-id">
<Input id="name-input-id" enabled="false" value="{data>/user/name}" />
<Label text="{i18n>age}: " class="sapUiSmallMargin"/>
<Label text="{
parts: [
{path: 'data>/user/birthday'},
{path: 'data>/user/dateFormat'}
],
formatter: '.formatter.ageDescription' }"/>
</Panel>
</mvc:View>
Main.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"model/formatter"
], function (Controller, JSONModel, formatter) {
"use strict";
return Controller.extend("controller.main", {
formatter: formatter,
onInit: function () {
var oModel = new JSONModel();
var oView = this.getView();
oModel.loadData("model/data.json");
var oPanel = oView.byId("user-panel-id");
oPanel.setModel(oModel,"data");
do.something();
},
});
});
data.json
{
"user": {
"name": "Frank",
"surname": "Jhonson",
"birthday": "23/03/1988",
"dateFormat": "DD/MM/YYYY",
"enabled": true,
"address": {
"street": "Minnesota street",
"city": "San Francisco",
"zip": "94112",
"country": "California"
}
}
}
Set the model to the view only when the data request is completed:
onInit: function() {
const dataUri = sap.ui.require.toUri("<myNamespace>/model/data.json");
const model = new JSONModel(dataUri);
model.attachEventOnce("requestCompleted", function() {
this.getView().setModel(model);
}, this);
// ...
},
This ensures that the formatter is called only once (invoked by checkUpdate(true) which happens on binding initialization; see below), and no further changes are detected afterwards.
Additionally (or alternatively), make the formatter more defensive. Something like:
function(value1, value2) {
let result = "";
if (value1 && value2) {
// format accordingly ...
}
return result;
}
Why does this happen?
View gets instantiated.
onInit of the Controller gets invoked. Here, the file model/data.json is requested (model is empty).
Upon adding the view to the UI, UI5 propagates existing parent
models to the view.
Bindings within the view are initialized, triggering checkUpdate(/*forceUpdate*/true)src in each one of them.
Due to the forceUpdate flag activated, change event is fired, which forcefully triggers the formatters even if there were no changes at all:
[undefined, undefined] → [undefined, undefined]. - 1st formatter call
Fetching model/data.json is now completed. Now the model needs to checkUpdate again.
[undefined, undefined] → [value1, undefined] → change detected → 2nd formatter call
[value1, undefined] → [value1, value2] → change detected → 3rd formatter call
Now, given that you are trying to load a static JSON file into your project, it's better to maximize the usage of the manifest.json.
That way, you are sure that the data is already loaded and available in the model prior to any binding.
You achieve this by adding the JSON file as a data source under sap.app
manifest.json
"sap.app": {
"id": "com.sample.app",
"type": "application",
"dataSources": {
"data": {
"type": "JSON",
"uri": "model/data.json"
}
}
}
Now, simply add this dataSource called data as one of the models under sap.ui5.
"sap.ui5": {
"rootView": {
"viewName": "com.sample.app.view.App",
"type": "XML"
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "com.app.sample.i18n.i18n"
}
},
"data": {
"type": "sap.ui.model.json.JSONModel",
"dataSource": "data"
}
}
}
With this, you DON'T need to call this anymore:
var oModel = new JSONModel();
var oView = this.getView();
oModel.loadData("model/data.json");
var oPanel = oView.byId("user-panel-id");
oPanel.setModel(oModel,"data");
..as the data model we added in the manifest.json, is already visible to oView and oPanel right from the get go.
This way, it doesn't matter if the formatter gets called multiple times, as it would already have the data available to it right from the beginning.

selectize does not work in meteor

Can any one tell me why this work in meteor:
"landTenancyType" : {
type: String,
optional: true,
autoform: {
type: "selectize",
options: function(){
return [
{label: "Joint", value: "Joint"},
{label: "Tenancy In Common", value: "Tenancy In Common"}
]
}
}
}
but this does not work:
"landTenancyType" : {
type: String,
optional: true,
autoform: {
type: "selectize",
options: function(){
return Categories.find().map(function(obj) {
console.log(obj);
return { label: obj.name, value: obj.name };
});
}
}
}
All the necessary publish and subscribe are working. Console does also show that values are coming from the collection. However a blank selectize ui is killing me. If i change type: "selectize", to type: "select", the select list is populated but i do not have the selectize goodness i need. Any ideas what I am doing wrong?
By the way I am using meteor with autoform 5.0 and comerc:autoform-selectize.
I think the problem is in this line:
Categories.find().map(function(obj)
find returns a cursor, you could do find().fetch() to get an array. Then map would work on that array.
Can you return object wittin another objects from a function ? A function will always return a single entity (either single value or single object). Please re-check your code's following section:
options: function(){
return Categories.find().map(function(obj) {
console.log(obj);
return { label: obj.name, value: obj.name };
});
}

Meteor array returned as string to this

In my Meteor app, I have a simple array field called relatedSentences. It is defined using SimpleSchema
relatedSentences: {
type: [String],
label: "Related Sentence",
optional: false,
defaultValue: []
},
It's data can be seen in the Mongo console:
"_id" : "ei96FFfFdmhPXxRWb",
"sentence" : "the newest one",
"relatedSentences" : [
"Ls6EyBkbcotcyfLyw",
"6HKQroCjZhG9YCuBt"
],
"createdAt" : ISODate("2015-10-25T11:21:25.338Z"),
"updatedAt" : ISODate("2015-10-25T11:41:39.691Z")
But when I try to access this field using this, it is returned as a raw string.
Template.showSentence.helpers({
translations: function() {
console.log("related: " + this.relatedSentences);
Meteor.subscribe('sentences', function() {
var relatedSentences = Sentences.find({_id: {$in: this.relatedSentences} }).fetch();
console.log("rel count" + relatedSentences.length);
return relatedSentences;
});
}
});
In the console I get an error. See the return value from the this.relatedSentences. It is the contents of the array as a string, with a comma interpolated.
related: Ls6EyBkbcotcyfLyw,6HKQroCjZhG9YCuBt
selector.js:595 Uncaught Error: $in needs an array
Not sure what is going on here.
Some Progress
I have made some progress, but not yet at a solution. By adding blackbox: true to the SimpleSchema definition, what looks like an array is now returned... but alas it is still failing. See below.
relatedSentences: {
type: [String],
label: "Related Sentence",
optional: false,
blackbox: true,
defaultValue: []
},
Now I get the results below in the console. The values are now being returned as a quoted array, which is what I expected. But the $in is still not seeing it as an array.
["Ls6EyBkbcotcyfLyw", "6HKQroCjZhG9YCuBt"]
selector.js:595 Uncaught Error: $in needs an array
How did the data get populated
In answer to #Kyll - this is how the data was originally populated. I am using AutoForm,
{{> afQuickField name='relatedSentences.0' value=this._id type="hidden"}}
but then adding the array data via a hook.
AutoForm.addHooks('translateForm', {
onSuccess: function (operation, result, template) {
Meteor.subscribe('sentences', function() {
var translatedSentence = Sentences.findOne(result);
var originalSentenceId = translatedSentence.relatedSentences[0]
Sentences.update(
{ _id: originalSentenceId},
{ $push: { relatedSentences: result}
});
Router.go('showSentence',{ _id: originalSentenceId } );
});
}
});
The problem here is the scope of this. You are referring to it inside the subscribe function, where this has a different context. Set a varibale to this in the context where it works, then use that variable instead:
Template.showSentence.helpers({
translations: function() {
console.log("related: " + this.relatedSentences);
var this_related_sentences = this.relatedSentences;
Meteor.subscribe('sentences', function() {
var relatedSentences = Sentences.find({_id: {$in: this_related_sentences} }).fetch();
console.log("rel count" + relatedSentences.length);
return relatedSentences;
});
}
});

dgrid JsonRest store not working

I have the following:
require([
"dojo/dom",
"dojo/on",
"dojo/store/Observable",
"dojo/store/JsonRest",
"dojo/store/Memory",
"dgrid/OnDemandGrid"
], function (dom, on, Observable, JsonRest, Memory, OnDemandGrid) {
var store = new JsonRest({
target: 'client/list',
idProperty: 'id'
});
var grid = new OnDemandGrid({
columns: {
"id": "ID",
"number": "Name",
"description": "Description"
},
sort: "lastName",
store: store
}, "grid");
});
client/list is a rest url returning a json object {data:[...]}, but the content of the list never shows up :/
I think the problem is caused by the async data loading, because with a json hard coded object the content show up
EDIT :
I've succeeded in achieving this by using a dojo/request, but the JsonRest shouldn't normally act the same way ? Can someone point me to the right direction ?
require([
'dojo/dom',
'dojo/on',
'dojo/store/Memory',
'dojo/request',
'dgrid/OnDemandGrid'
], function (dom, on, Memory, request, OnDemandGrid) {
request('client/list', {
handleAs: 'json'
}).then(function (response) {
// Once the response is received, build an in-memory store with the data
var store = new Memory({ data: response });
// Create an instance of OnDemandGrid referencing the store
var grid = new OnDemandGrid({
store: store,
sort: 'id', // Initialize sort on id, ascending
columns: {
'id': 'ID',
'number': 'Name',
'description': 'Description'
}
}, 'grid');
console.log(store);
on(dom.byId('queryForm'), 'input', function (event) {
event.preventDefault();
grid.set('query', {
// Pass a RegExp to Memory's SimpleQueryEngine
// Note: this code does not go out of its way to escape
// characters that have special meaning in RegExps
description: new RegExp(this.elements.last.value, 'i')
});
});
on(dom.byId('queryForm'), 'reset', function () {
// Reset the query when the form is reset
grid.set('query', {});
});
});
});
Ok problem found :/
My "client/list" url was returning a json object like this:
{data: [{id:"1", label: "test"}, {id:"2", label: "test"}]}
Turns out that the JsonRest object is already encapsulating data in a data node, so by returning a json like this:
{[{id:"1", label: "test"}, {id:"2", label: "test"}]}
everything worked fine :)

ExtJS4 - Reconfiguring a grid in ASP.NET - JSON structure issue

One of ASP.NET's security features is proving to be a mountain to scale here - the "d" property addition when returning a JSON response appears to be confusing ExtJS when I attempt to reconfigure a gridpanel dynamically, causing it to fail when attempting to generate new column structure.
I followed this solution by nicholasnet:
http://www.sencha.com/forum/showthread.php?179861-Dynamic-grid-columns-store-fields
and it works beautifully, until the JSON payload is wrapped around the "d" property, e.g.
{"d":{
"metaData": {
"root": "data",
"fields": [{
"type": "int",
"name": "id",
"hidden": true,
"header": "id",
"groupable": false,
"dataIndex": "id"
}, ...omitted for brevity...]
},
"success": true,
"data": [{
"id": "1",
"controller": "Permissions",
"description": "Allow to see permission by roles",
"administrator": true,
"marketing": false
}]
}
}
I can't work out how to tell ExtJS to skirt around this problem. I've tried setting the "root" property of the AJAX reader to "d.data" but that results in the grid showing the correct number of rows but no data at all.
I've all the property descriptors required for column metadata ("name", "header", "dataIndex") in the JSON so I don't believe the JSON structure to be the cause. My main lead at the moment is that on the event handler:
store.on
({
'load' :
{
fn: function(store, records, success, operation, eOpts)
{
grid.reconfigure(store,store.proxy.reader.fields);
},
scope: this
}
}, this);
The fields in historyStore.proxy.reader.fields part is undefined when I pass the "d"-wrapped JSON. Anyone have any ideas on why this is or how to solve this issue?
edit: my Store/proxy
Ext.define('pr.store.Store-History', {
extend: 'Ext.data.Store',
model: 'pr.model.Model-History',
proxy: {
type: 'ajax',
url: '/data/history.json',
reader: {
type: 'json',
root: 'd'
}
}
});
Ext.define('pr.store.Store-History', {
extend: 'Ext.data.Store',
model: 'pr.model.Model-History',
proxy: {
type: 'ajax',
url: '/data/history.json',
reader: {
type: 'json',
root: 'data',
readRecords: function(data) {
//this has to be before the call to super because we use the meta data in the superclass readRecords
var rootNode = this.getRoot(data);
if (rootNode.metaData) {
this.onMetaChange(rootNode.metaData); // data used to update fields
}
/**
* #deprecated will be removed in Ext JS 5.0. This is just a copy of this.rawData - use that instead
* #property {Object} jsonData
*/
this.jsonData = rootNode;
return this.callParent([rootNode]); // data used to get root element and then get data from it
},
}
}
});
Update:
you are not getting fields in reader because the default code for getting fields from data doesn't handle your wrapped data, so you need to change 'readRecords' function to handle your custom data

Resources