How can customData can be binded with JavaScript - sapui5

In the affected application is a responsive table whose ColumnListItems are added via JavaScript code. Now the lines should be highlighted by the highlighting mechanism depending on their state. The first idea was to control the whole thing via a normal controller function. I quickly discarded the idea, since the formatter is intended for such cases. So I created the appropriate Formatter function and referenced it in the JavaScript code. The call seems to work without errors, because the "console.log" is triggered in each case. Also the transfer of fixed values is possible without problems. However, the values I would have to transfer are located within customData of each line...
No matter how I try to form the path I get an "undefined" or "null" output.
I have already tried the following paths:
"/edited"
"/customData/edited"
"mAggregations/customData/0/mProperties/value"
"/mAggregations/items/0/mAggregations/customData/0/mProperties/value"
The code from Controller.js (with consciously differently indicated paths):
var colListItem = new sap.m.ColumnListItem({
highlight: {
parts: [{
path: "/mAggregations/items/0/mAggregations/customData/0/mProperties/value"
}, {
path: "/edited"
}],
formatter: Formatter.setIndication
},
cells: [oItems]
});
// first parameter to pass while runtime to the formatter
colListItem.data("editable", false);
// second paramter for the formatter function
colListItem.data("edited", false);
oTable.addItem(colListItem);
The code from Formatter.js:
setIndication: function (bEditable, bEdited) {
var sReturn;
if (bEditable && bEdited) {
// list item is in edit mode and edited
sReturn = "Error";
} else if (bEditable || bEdited) {
// list item is in edit mode or edited
sReturn = "Success";
} else {
sReturn = "None";
}
return sReturn;
}
The goal would also be for the formatter to automatically use the value of the model in order to avoid its own implementation of a listener, etc.
I hope one of you has a good/new idea that might bring me a solution :)
Many thanks in advance!

You cannot bind against the customData. Because the customData is located in the element, it is like a property.
Thats why you defined it here on colListItem: colListItem.data("key", value)
You only can bind against a model.
So I see three solutions
Store the information in a separate local JSON model whereof you can speficy your binding path to supply the values to your formatter
Do not supply the information via a binding path to the formatter, but read a model/object/array from a global variable in the controller holding the information via this (=controller) in formatter function
Store the information in the customData of each element and access the element reference in the formatter function via this(=ColumnListItem).data().
Passing the context to the formatter similar to this formatter: [Formatter.setIndication, colListItem]
Cons of 1. and 2: you need a key for a respective lookup in the other model or object.
From what I understand I would solve it with solution 3.

Related

AG-GRID value formatter not working for dynamically generated currency

I am trying to use a value-formatter in my AG-GRID table for displaying currency information.
This works perfectly when I have a hardcoded value in the formatter, in this case the unicode for 'Euros'
currencyFormatter(params) {
return '\u20ac' + params.value;
}
However, I dont know in advance what currency I will need to format the data in, as it is dynamically generated. If I try an use a value that is available in my component (like below) it doesn't like it!
currencyFormatter(params) {
return this.currencyUnicode + params.value;
}
There it throws in the console is:
TypeError: Cannot read property 'defaultCurrency' of undefined
It seems like all 'this' component variables are not available inside the currencyFormatter. Is there a way to make this work?
In order to access your component variables, you will have to bind your component context - this to the valueFormatter
...
name : 'Currency',
field : 'currency',
valueFormatter: this.currencyFormatter.bind(this) //bind your component's context here
...
currencyFormatter(params) {
return this.currencyUnicode + params.value;
}
This is a common javascript problem. Here is a good read
Also, this answer describes the 2 ways you can reference this.

Can't get changed property from attachPropertyChange

I would like to know which property in the JSON model has changed when modified by a view.
For a test I took OpenUI5 walkthrough example and added the following lines in the application controller
oProductModel.attachPropertyChange( function(oEvent){
console.log("event: ", oEvent);
}, this);
When I change a property in the text input, the function in the attachPropertyChange is called but oEvent object is empty as I print it in console.
I know I could connect to text input change event, but I would like to use attachPropertyChange in case there would be multiple views of the same model.
As far as I understood, you'd like to avoid using the change event of the Input control because there is no information about which property in the model has changed. However, you can still get all the relevant information within the change handler via:
oControl.getBinding(/*controlPropertyName*/).getPath() to get the name of the bound property, or
oControl.getBindingContext(/*modelName*/).getPath(/*suffix*/) to get the path of the bound context. The getPath here awaits an optional suffix that will be appended to the context path with a "/" in between.
Combine those two APIs to get an absolute path in case the property binding was relative. E.g.:
onInputChange: function (event) {
const inputControl = event.getSource();
const property = inputControl.getBinding("value").getPath(); // "myProperty"
const absolutePath = inputControl.getBindingContext(/*modelName*/).getPath(property) // "/0/myProperty"
// ...
},
You can use change event for all input field in UI, and write event handling method in the controller. You will get the property as well as value in the oEvent of the event handling method easily. I hope you understood.

FilterOperator bug in using quotes, same code different behavior across systems/time

this.getView().getModel().read("/QualificationProficiencySet", {
filters: [new sap.ui.model.Filter({
path: "Qobjid",
operator: sap.ui.model.FilterOperator.EQ,
value1: nQObjid
})],
success: function(data) {
that._profData = data.results;
that._oQuickView.setModel(new sap.ui.model.json.JSONModel(that._profData), "proficiencyModel");
// delay because addDependent will do a async rerendering and the actionSheet will immediately close without it.
jQuery.sap.delayedCall(200, that, function() {
that._oQuickView.openBy(oLink);
});
},
error: function(evt) {}
});
nQObjidis of type string - always.
Yesterday on our development system I saw the error
"Invalid parametertype used at function 'eq' (Position: 8)"
I noticed that the filter was appended in the URL without single quotes around the value of nQObjid. Strange because at the moment it's added as the value of the filter operator it's clearly a string. I couldn't find any related issues, but I put a (dirty) workaround in place by doing value1: "'"+nQObjid+"'".
This worked, until today, same system, didn't change the code, but suddenly the quotes are part of the value inside the gateway. So I remove the "'"again and tested, works. Then I transport the solution to production to find out that I now have the same problem on production with "Invalid parametertype used at function 'eq'.. Another user on production does not have this issue, so I'm a bit lost.
Similar issue: new SAPUI5 updat to 1.42 has odata bug "Invalid Parameters...
This may not solve your problem but it's too long for a comment, that's why I am posting it here:
When doing a read request, the framework is making a call to a helper class: V2 ODataModel.js Line #4231
aUrlParams = ODataUtils._createUrlParamsArray(mUrlParams);
The helper class then calls a private method: ODataUtils.js Line #72
return "$filter=" + this._createFilterParams(aFilters, oMetadata, oEntityType);
This private method is doing a bunch of stuff, most importantly calling another private method which is actually building the strings ODataUtils.js Line #128
sFilterParam = that._createFilterSegment(oFilter.sPath, oMetadata, oEntityType, oFilterSegment.operator, oFilterSegment.value1, oFilterSegment.value2, sFilterParam);
One of the first thing this method does is formatting your value, and I guess here is where your problem occurs: ODataUtils.js Line #393
oValue1 = this.formatValue(oValue1, sType);
The formatValue function takes your value and its Edm.Type and depending on that type does different stuff. If your objectId is a string, then it should put single quotes at the beginning and the end: ODataUtils.js Line #468
sValue = "'" + String(vValue).replace(/'/g, "''") + "'";
If the type is undefined or some weird value that UI5 doesn't know, then your value is simply cast to a String (which is probably what happens in your case).
Why is the type undefined or weird? That's where you come in... you have to do a little debugging to find out what the actual values are. If the UI5 code is unreadable you can put sap-ui-debug=true as an URL parameter:
my.sap.system.com:8000/sap/bc/ui5_ui5/sap/ztest/index.html?sap-ui-debug=true
If it's a timing issue (metadata has not been loaded for whatever reasons) then wrapping your code in a Promise might help:
var oModel = this.getView().getModel();
oModel.metadataLoaded().then(function() {
oModel.read("/QualificationProficiencySet", {
// ...
});
}

Get newly created id of a record before redirecting page

I would like to retrieve the id of a newly created record using javascript when I click on save button and just before redirecting page.
Do you have any idea please ?
Thank you !
One way to do this in Sugar 7 would be by overriding the CreateView.
Here an example of a CustomCreateView that outputs the new id in an alert-message after a new Account was successfully created, but before Sugar gets to react to the created record.
custom/modules/Accounts/clients/base/views/create/create.js:
({
extendsFrom: 'CreateView',
// This initialize function override does nothing except log to console,
// so that you can see that your custom view has been loaded.
// You can remove this function entirely. Sugar will default to CreateView's initialize then.
initialize: function(options) {
this._super('initialize', [options]);
console.log('Custom create view initialized.');
},
// saveModel is the function used to save the new record, let's override it.
// Parameters 'success' and 'error' are functions/callbacks.
// (based on clients/base/views/create/create.js)
saveModel: function(success, error) {
// Let's inject our own code into the success callback.
var custom_success = function() {
// Execute our custom code and forward all callback arguments, in case you want to use them.
this.customCodeOnCreate(arguments)
// Execute the original callback (which will show the message and redirect etc.)
success(arguments);
};
// Make sure that the "this" variable will be set to _this_ view when our custom function is called via callback.
custom_success = _.bind(custom_success , this);
// Let's call the original saveModel with our custom callback.
this._super('saveModel', [custom_success, error]);
},
// our custom code
customCodeOnCreate: function() {
console.log('customCodeOnCreate() called with these arguments:', arguments);
// Retrieve the id of the model.
var new_id = this.model.get('id');
// do something with id
if (!_.isEmpty(new_id)) {
alert('new id: ' + new_id);
}
}
})
I tested this with the Accounts module of Sugar 7.7.2.1, but it should be possible to implement this for all other sidecar modules within Sugar.
However, this will not work for modules in backward-compatibility mode (those with #bwc in their URL).
Note: If the module in question already has its own Base<ModuleName>CreateView, you probably should extend from <ModuleName>CreateView (no Base) instead of from the default CreateView.
Be aware that this code has a small chance of breaking during Sugar upgrades, e.g. if the default CreateView code receives changes in the saveModel function definition.
Also, if you want to do some further reading on extending views, there is an SugarCRM dev blog post about this topic: https://developer.sugarcrm.com/2014/05/28/extending-view-javascript-in-sugarcrm-7/
I resolved this by using logic hook (after save), for your information, I am using Sugar 6.5 no matter the version of suitecrm.
Thank you !

Default values for missing parameters

I'm using Knockout with jQuery and jQuery templates. Assume that I have a template which expects a person object
<script type="text/html" id="person_template">
<tr><td>Forename</td><td><input type="textbox" data-bind="value:FORENAME" /></td></tr>
<tr><td>Surname</td><td><input type="textbox" data-bind="value: SURNAME"/></td></tr>
</script>
Now, if I pass an object with just a FORENAME to this template, I will get an error:
SURNAME is not defined error
I tried to create a custom binding in Knockout, but the error is thrown before it even gets there.
If I fill in these empty fields before passing the object to the template, I know everything will work out, but I would like to have the solution in my template rather than in my javascript.
Does anyone know a method that might help for situations like these?
This is a bit challenging, because you are within a template. While preparing the template, KO accesses the variable (well, actually it is accessed in jQuery Templates by a function that KO built).
One option is to pass your property as a string to a custom binding and make sure that it is initialized.
It would be like:
ko.bindingHandlers.valueWithInit = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
var value = valueAccessor();
if (!context[value]) {
context[value] = ko.observable();
}
var realValueAccessor = function() {
return context[value];
}
//call the real value binding
ko.bindingHandlers.value.init(element, realValueAccessor, allBindingsAccessor, context);
},
update: function (element, valueAccessor, allBindingsAccessor, context) {
var realValueAccessor = function() {
return context[valueAccessor()];
}
//call the real value binding
ko.bindingHandlers.value.update(element, realValueAccessor);
}
}
So, this would validate that your object has the field, if it does not it creates a new observable for that field. Then, it hands it off to the real value binding.
A very similar (but less verbose) alternative to this would be to have the binding ensure that the field is there and then rewrite the binding attribute to use the real value binding. Something like:
//Another option: rewrite binding after making sure that it is initialized
ko.bindingHandlers.valueWithInit = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
var value = valueAccessor();
if (!context[value]) {
context[value] = ko.observable();
}
$(element).attr("data-bind", "value: " + value);
ko.applyBindings(context, element);
}
}
Both of these assume that the field that you are passing is directly off of the object that is the context of your template (so, it wouldn't work if you passed something with global scope like 'viewModel.someProperty').
Here is a working sample with both options: http://jsfiddle.net/rniemeyer/dFSeB/
I would rather not pass the field as a string, but there is not really a good way around it that I see.
You'll be better off ensuring that the object passed to the template has all the parameters set in. If they are not then you can add default values but putting all this logic in the template is going against the MVVM pattern. The templates (like Views in mvc) are not supposed to contain any logic IMO.