Multiple Aviary Feather - javascript

I've a issue on the integration of the Aviary Feather.
In my javascript I need to use Feathers like this:
// Aviary init
var featherProductEditor = new Aviary.Feather({
apiKey: 'myapykey',
apiVersion: 3,
theme: 'dark',
tools: 'all',
appendTo: '',
onSave: function(imageID, newURL) {
// Do things for featherProductEditor
console.log('featherProductEditor');
// Close the editor
featherProductEditor.close();
}
});
// Aviary init
var featherContentBlockEditor = new Aviary.Feather({
apiKey: 'myapykey',
apiVersion: 3,
theme: 'light',
tools: 'all',
appendTo: '',
onSave: function(imageID, newURL) {
// Do things for featherContentBlockEditor
console.log('featherContentBlockEditor');
// Close the editor
featherContentBlockEditor.close();
}
});
Then I call the two Feather
featherProductEditor.launch({ ....
and
featherContentBlockEditor.launch({ ....
but the only "onSave*:" callback called is the second one of the "featherContentBlockEditor" var
Why? How can I solve this?

For your first question, why only the second onSave is called ?
Internally, the Aviary Web SDK stores the feather config in AV.launchData, and AV is an alias of the Aviary global variable. This is the code snippet from the Aviary.Feather function:
AV.Feather = function (config) {
...
AV.launchData = AV.util.extend(AV.baseConfig, config);
...
}
So, that means featherContentBlockEditor's configuration will override the featherProductEditor's configuration.
You can verify this by adding AV.launchData.onSave() after the creation of each feather.
For your second question, How can I solve this ?
No, you can't without hacking into the SDK. This is how Aviary Web SDK works, only define one instance of Aviary.Feather per page.

How can you solve it?
You can use imageID to identify which instance of Aviary produced the onSave event.
onSave: function(imageID, newURL) {
if(imageID === 'productImg') {
// Do things for featherFeatureEditor
console.log('featherProductEditor');
} else {
// Do things for featherContentBlockEditor
console.log('featherContentBlockEditor');
}
// Close the editor
featherContentBlockEditor.close();
}
Use image:'productImg' for the launch configs for your product image.

You can only have one instance of the Aviary editor on a given page, but you can reuse it by calling:
editor.close(true); // passing true forces an immediate close without triggering shutdown animation
editor.launch({ image: new_id, url: new_url });

Related

How to process two sets from different models in one custom control

Aim:
I'd like to have two models(sets of data) passed to the custom control with a predefined search field, in which later on I can execute filtering.
I'm a newbie in OpenUi5, so I might be doing something wrong and stupid here. I've started with a simplified task of passing data from the frontend to my custom control and experiencing troubles.
Background of the simplified idea:
Create a custom control with an aggregation foo , the value to it will be provided from the view.
Also create another aggregation element _searchField which will be populated with the data provided from the view.
Fire the onSuggestTerm everytime user types in a _searchField.
Custom control code:
function (Control) {
var DropDownListInput = Control.extend('xx.control.DropDownListInput', {
metadata: {
defaultAggregation: 'foo',
aggregations: {
foo: { type: 'sap.m.SuggestionItem', multiple: true, singularName: 'suggestionItem' },
_searchField: { type: 'sap.m.SearchField', multiple: false, visibility: 'hidden' }
}
}
});
DropDownListInput.prototype.init = function () {
var that = this;
this.onSuggestTerm = function (event) {
var oSource = event.getSource();
var oBinding = that.getAggregation('foo');
oBinding.filter(new sap.ui.model.Filter({
filters: new sap.ui.model.Filter('DISEASE_TERM', sap.ui.model.FilterOperator.Contains, ' Other')
}));
oBinding.attachEventOnce('dataReceived', function () {
oSource.suggest();
});
};
this.setAggregation('_searchField', new sap.m.SearchField({
id: 'UNIQUEID1',
enableSuggestions: true,
suggestionItems: that.getAggregation('foo'),
suggest: that.onSuggestTerm
}));
};
return DropDownListInput;
}, /* bExport= */true);
I'm not providing Renderer function for control here, but it exists and this is the most important excerpt from it:
oRM.write('<div');
oRM.writeControlData(oControl);
oRM.write('>');
oRM.renderControl(oControl.getAggregation('_searchField'));
oRM.write('</div>');
Passing the data to this control from the xml frontend:
<xx:DropDownListInput
id="diseaseTermUNIQUE"
foo='{path: db2>/RC_DISEASE_TERM/}'>
<foo>
<SuggestionItem text="{db2>DISEASE_TERM}"
key="{db2>DISEASE_TERM}" />
</foo>
</xx:DropDownListInput>
The code fails to run with this error Cannot route to target: [object Object] -
and I have no idea what's wrong here..
The problem is that you forgot to provide single quotes in your path:
foo="{path: 'db2>/RC_DISEASE_TERM/'}"

How to do Framework7 routing with jQuery?

I am developing a hybrid mobile app with Framework7. I finished the user interface successfully and now I want to add functionality to my app. My problem is the navigation from one .html to another.
At the user interface i did the navigation with links, like this:
LOGIN
Because of some checks I removed the whole href-tag and here I come to the problem, how can i do this linking in jQuery?
I tried a lot, also followed the public "Router JavaScript API" (https://v1.framework7.io/docs/router-api.html) but nothing worked well (NOTE: this is not my whole code, just the affected parts):
Attempt 1
var myApp = new Framework7 ({});
var mainView = myApp.views.add('.view-main');
var app = {
init: function () {
events.doClickFunctions();
},
login: {
success: function () {
//here should be the linking done
mainView.router.load('/homepage/');
}
}
};
Problem: "myApp.views.add is not a function"
Attempt 2
var myApp = new Framework7 ({});
var mainView = myApp.addView('.view-main');
var app = {
init: function () {
events.doClickFunctions();
},
login: {
success: function () {
//here should be the linking done
mainView.router.load('/homepage/');
}
}
};
Problem: "myApp.addView is not a function"
And i tried some other combinations, but nothing worked.
Furthermore, I made a workaround: If the checks are successful, the href attribute will be added with jQuery and a virtual click is made on the element. So the user experience is like i want it to, but I guess thats not how it is supposed to work?
Thank you in advance!
try this
var app = new Framework7({
id: 'io.framework7.testapp',
precompileTemplates: true, //
template7Pages: true,
root: '#app',
theme: theme,
cache: false ,/* disable caching */
data: function () {
},
methods: {
helloWorld: function () {
app.dialog.alert('Hello World!');
},
},
routes: routes,
vi: {
placementId: 'pltd4o7ibb9rc653x14',
}
});
app.views.main.router.navigate('/login/');
for routing to another Page in jq use this :
app.views.main.router.navigate('/login/');

Cannot change Ajax timeout in ext-js app

I'm trying to override ajax timeout in a Documentum xCP application.
Ext.Ajax.setTimeout(120000) and Ext.override(Ext.data.proxy.Ajax, { timeout:120000 }) didn't help. Every time an instance of Ext.data.proxy.Ajax is created, it has timeout: 30000. Maybe it's reverted after my call, but I don't know how to check this.
With Ext.override I can create new properties in Ext.data.proxy.Ajax prototype, but existing properties don't change.
I debugging my app in Chrome and using the special parameter in app url to load the debug version of ext-all script.
upd:
If I call
Ext.override(Ext.data.proxy.Ajax, { timeout:120004 })`
just once, then
Ext.data.proxy.Ajax.prototype.getConfigurator().values["timeout"]==120004
Ext.data.proxy.Ajax.prototype.timeout==30000
The value 30000 is used in Ext.data.proxy.Ajax.doRequest().
If I call it again:
Ext.override(Ext.data.proxy.Ajax, { timeout:120005 })`
then
Ext.data.proxy.Ajax.prototype.getConfigurator().values["timeout"]==120004
Ext.data.proxy.Ajax.prototype.timeout==120005
I'm not familiar with Documentum xCP but on my web application using Ext.js (v.4.1), I used the following snippet to change general timeout:
Ext.onReady(function(){
Ext.Ajax.timeout = 150000;
});
Maybe the onReady event is the key.
If you want to override the proxy defaults, use:
Ext.define(null, {
override: 'Ext.data.proxy.Server',
config: {
timeout: 120000
}
});
If you want to override the proxy defaults. Put this class under app/overrides folder.
Ext.define('Ext.overrides.data.proxy.Proxy', {
override: 'Ext.data.proxy.Proxy',
timeout: 10000,
completeOperation: function(operation) {
try {
this.callParent(operation);
} catch (e) {
}
}
});
Or add your view model as give below
Ext.define('Model', {
extend: 'Ext.app.ViewModel',
alias: ..
stores: {
xstore: {
model: 'type'
proxy: {
type: 'ajax',
timeout: 90000, // increasing time.
url: url
}
}
}
});

Data Tables are not loading when i redirect my page using self.do_action in odoo(openERP7) qweb screen

When i redirect my page using self.do_action in odoo(openERP7) it is not loading Data Tables in the new page.
In other pages it was working fine. But in a particular page if i redirect using this self.do_action is not working. But self.act_window is working fine in the same page.
If any one faced this same issue please let me know.
Update:I found a similarity of problems in my code. I have a model like performance.review and some other models also. All the self.do_action used in this model is not loading Data tables properly. But other model screens does perfectly.
Is there any relation between model extension and using self.do_action?
Here is my code,
module.ReviewForm= instance.web.Widget.extend({
events: {
'click #review_tree_view':'load_tree_view',
},
load_tree_view: function (event) {
var self = this;
self.do_action({
type: 'ir.actions.client',
tag: "performance.review",
name:'Tree view',
target: 'current',
});
},
In the javascript file, you could add an event to a buttons class name like this:
bind_events: function () {
this.$('.oe_btn_class_name').on('click', this.on_call_new_view_function);
},
Then the "on_call_new_view_function" is called when a click event occurs and opens the new view like this:
on_call_new_view_function: function () {
var self = this;
// you can pass in other data using the context dictionary variable
var context = {
'id': this.id,
};
// the action dictionary variable sends data in the "self.do_action" method
var action = {
type: 'ir.actions.act_window',
res_model: 'model.name',
view_id: 'view_id',
view_mode: 'form',
view_type: 'form',
views: [[false, 'form']],
target: 'new',
context: context,
};
// self.do_action accepts the action parameter and opens the new view
self.do_action(action);
},
Actually this is a small mistake done by myself. Im using the same model for many qweb screens, and each time Im rendering form view using self.do_action I did't emptying the existing tree view.
It can be easily done by adding this line.
Now data tables loading properly and perfectly.
load_tree_view: function (event) {
var self = this;
self.$el.empty();
self.do_action({
type: 'ir.actions.client',
tag: "performance.review",
name:'Tree view',
target: 'current',
});
},

Not fetching correct url issue

I have a backboneJS app that has a router that looks
var StoreRouter = Backbone.Router.extend({
routes: {
'stores/add/' : 'add',
'stores/edit/:id': 'edit'
},
add: function(){
var addStoresView = new AddStoresView({
el: ".wrapper"
});
},
edit: function(id){
var editStoresView = new EditStoresView({
el: ".wrapper",
model: new Store({ id: id })
});
}
});
var storeRouter = new StoreRouter();
Backbone.history.start({ pushState: true, hashChange: false });
and a model that looks like:
var Store = Backbone.Model.extend({
urlRoot: "/stores/"
});
and then my view looks like:
var EditStoresView = Backbone.View.extend({
...
render: function() {
this.model.fetch({
success : function(model, response, options) {
this.$el.append ( JST['tmpl/' + "edit"] (model.toJSON()) );
}
});
}
I thought that urlRoot when fetched would call /stores/ID_HERE, but right now it doesn't call that, it just calls /stores/, but I'm not sure why and how to fix this?
In devTools, here is the url it's going for:
GET http://localhost/stores/
This might not be the answer since it depends on your real production code.
Normally the code you entered is supposed to work, and I even saw a comment saying that it works in a jsfiddle. A couple of reasons might affect the outcome:
In your code you changed the Backbone.Model.url() function. By default the url function is
url: function() {
var base =
_.result(this, 'urlRoot') ||
_.result(this.collection, 'url') ||
urlError();
if (this.isNew()) return base;
return base.replace(/([^\/])$/, '$1/') + encodeURIComponent(this.id);
},
This is the function to be used by Backbone to generate the URL for model.fetch();.
You added a custom idAttribute when you declared your Store Model to be like the one in your DB. For example your database has a different id than id itself, but in your code you still use new Model({ id: id }); when you really should use new Model({ customId: id });. What happens behind the scenes is that you see in the url() function it checks if the model isNew(). This function actually checks if the id is set, but if it is custom it checks for that:
isNew: function() {
return !this.has(this.idAttribute);
},
You messed up with Backbone.sync ... lots of things can be done with this I will not even start unless I want to make a paper on it. Maybe you followed a tutorial without knowing that it might affect some other code.
You called model.fetch() "a la" $.ajax style:
model.fetch({
data: objectHere,
url: yourUrlHere,
success: function () {},
error: function () {}
});
This overrides the awesomeness of the Backbone automation. (I think sync takes over from here, don't quote me on that).
Reference: Backbone annotated sourcecode

Categories