I need to compose the values from two data bindings in one text output.
Using just one binding as in the following example works perfectly fine:
Working:
<ObjectStatus
text="{
path:'messages>type',
formatter: '.formatter.notificationMsg'}"
icon="{
path: 'messages>type',
formatter: '.formatter.notificationIcon'
}"
/>
However adding another binding leads to an output of "[object Promise]" for the second binding. The first one gets displayed correctly. I already set the binding mode to complex in bootstrap and tried things similar to the documentation https://sapui5.hana.ondemand.com/sdk/#/topic/a2fe8e763014477e87990ff50657a0d0
Not working:
<ObjectStatus
text="{messages>user_id}{path: 'messages>type',
formatter: '.formatter.notificationMsg'}"
icon="{path: 'messages>type',
formatter: '.formatter.notificationIcon'}"/>
Does anyone have hint on how to put both parts together correctly? Let me know if you need more details!
Many thanks in advance!
This is not how you write complex syntax binding :)
When you want to compose several expression bindings into you must enclose then in {= ... } (see https://sapui5.hana.ondemand.com/sdk/#/topic/daf6852a04b44d118963968a1239d2c0)
But you will not be able to mix direct binding like {messages>user_id} with formatter bindings like {path: 'messages>type', formatter: '.formatter.notificationMsg'}, so this approach is not enough for you anyway ;)
So the correct approach would be to enhance your formatter so that it support a second parameter and then simply use it as follow:
<ObjectStatus
text="{
parts: [
'messages>type',
'messages>user_id'
],
formatter: '.formatter.notificationMsg'
}"
...
/>
Dont forget to modify the formatter accordingly:
notificationMsg(type, user_id) {
}
Related
Im using foundation emails, i can use variables on a template by wrapping them in a raw tag, for example:
<raw><%= myVariable %></raw>
Now, I need to add attachments, and attachmeants come as an array with this form:
attachmentsData: [
{
id: '301e165f-130e-4f89-83da-a49ff43172ce_Screenshotfrom2018-11-1916-43-01.png',
title: 'Screenshotfrom2018-11-1916-43-01.png',
url: 'https://s3.eu-central-1.amazonaws.com/dev-messaging-attachments/301e165f-130e-4f89-83da-a49ff43172ce_Screenshotfrom2018-11-1916-43-01.png',
},
{
id: '301e165f-130e-4f89-83da-a49ff43172ce_Screenshotfrom2018-11-1916-43-02.png',
title: 'Screenshotfrom2018-11-1916-43-02.png',
url: 'https://s3.eu-central-1.amazonaws.com/dev-messaging-attachments/301e165f-130e-4f89-83da-a49ff43172ce_Screenshotfrom2018-11-1916-43-02.png',
},
],
On the documentation it also says that i can loop over arrays that are declared in src/data in yml format.
However in my case i need the array of objects to come from the backend.
but if it comes from the backend it i have to parse it with the raw tags.
But if use the raw tags i cant use the each helper:
https://foundation.zurb.com/emails/docs/panini.html#custom-data
Do you know how to loop over this array?
note that, If i do <raw><%= myArray[0].name %></raw> this works and prints the right value.
Any tips? Thanks
If <raw><%= myArray[0].name %></raw> works, then the following should work too.
<% myArray.forEach(data => { %>
<raw><%= data.name %></raw>
<% }); %>
I'm very new to tinyMCE (and to JavaScript), so I'm sorry if the answer to my question is obvious. (I'm also working on code and files that another developer created and that I'm not overly familiar with.)
I need to use an external template file for tinyMCE4, and I can't get it to work. I've looked at the tinyMCE4 documentation, but I don't understand where I'm going wrong.
The tinyMCE init is in an index.cfm file, and the list of templates is in a separate file, template_list.js.
Contents of template_list.js:
var tinyMCETemplateList = [
["Name", "templates/file1.cfm", "Name."],
["Name2", "templates/file2.cfm", "Name2."],
...
];
In index.cfm, I've included "template" in the plugins line.
To pull in the templates to appear as a list in a drop-down so the user can choose a template, I've tried:
template_external_list_url: "tinymce/js/tinymce/template_list.js"
With this, when I run the program and click the Insert Template button I get a "No templates defined" error.
I've also tried:
templates : [{url:"tinymce/js/tinymce/template_list.js"}]
With this, the Insert Template dialog box appears, but the drop-down is empty, and the raw code from template_list.js appears in the text area under the drop-down. I get the same result if I change the code in template_list.js to:
[
{title: "Name", url: "templates/file1.cfm", description: "Name."},
{title: "Name2", url: "templates/file2.cfm", description: "Name2."},
...
]
...and also if I add quotations around "title", "url", and "description".
Again, sorry if the answer is obvious, but as a beginner I appreciate any help.
Per the documentation the TinyMCE configuration object expects you to pass an array containing one object for each template. At a high level it would look like this:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: [
{title: 'Item 1', description: 'Desc 1', content: 'My content'},
{title: 'Item 2', description: 'Desc 2', url: 'development.html'}
]
});
You will note that the templates configuration option is passed an array of objects - this is what TinyMCE expects so no matter what you have to return an array of objects.
You can insert the template HTML directly (as shown in the first example above) or you can point to a URL that the browser can fetch when TinyMCE is initialized (as shown in the second example above). There is no template_external_list_url configuration option so that is not working because its not valid.
If you want to externalize the templates outside the TinyMCE configuration you can place the data in a file and reference that via a URL. For example:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "template",
menubar: "insert",
toolbar: "template",
templates: "/path/to/the/file/templates.php"
});
The URL referenced there must return an array of objects as that is ultimately what TinyMCE is expecting. Your example above seems to imply your external file is returning a JavaScript variable named tinyMCETemplateList - but that means nothing to TinyMCE so while the file may be loaded what is "returned" is not an array of JavaScript objects.
I would suggest you start by getting things to work without externalizing the templates (just make sure you get the basics working). Then externalize the content to a separate file and make sure that the file returns an array of objects. I would note that your example using tinyMCETemplateList seems to return an array of arrays which is not what TinyMCE is expecting.
I found this really frustrating and fiddly to get working at all. Eventually what I'm doing is calling a function in another js file that returns an array that I give to the templates parameter.
function GetTemplateArray()
{
return new Array(
{
title: "2 Columns",
url: "templates/template1.html",
description: "Adds a 2 column table"
},
{
title: "3 Columns",
url: "templates/scf/template2.html",
description: "Adds a 3 column table"
}
);
}
Then in the tinymce.init code:
tinymce.init(
{
...
templates: GetTemplateArray(),
...
I am trying to pass more than one parameter to Mantra container like this:
FlowRouter.route('/cargarDatos/:fechaInicial/:consecutivos', {
name: 'cargarDatos.iniciar',
action({fechaInicial, consecutivos}) {
mount(MainLayoutCtx, {
content: () => (<CargarDatos fechaInicial={fechaInicial} consecutivos={consecutivos} />),
footer: <PiePágina />
});
}
It seems I am doing something wrong since insede CargarDatos container the variables are not recognized. Could somebody help out?
Everything works fine if I only place one parameter.
Thanks in advance.
Syntax is correct, problem was in container code.
I am having problems creating a Tweet() kind instance and having the span content be "hoho" even though line 60 should set it - https://github.com/metaperl/enyo-identica-tutorial/blob/master/source/App.js#L60
I also tried t.setText("hoho"); but that did not work either.
You should be calling setText() instead of violating the encapsulation of the tweet kind. However, the problem appears to be the call to addContent(). This doesn't do what you think it should. Either you want to call addContent() with t.getText() or you want to actually add the new tweet control to the scroller. addContent() expects to get a string passed in (see: http://enyojs.com/api/#enyo.Control).
You probably want to instead do something like this:
reloadTweets: function() {
this.$.main.createComponent({kind: "Tweet", text: "hohoho"}, {owner: this});
this.$.main.render();
}
Although, what you probably -really- want to do is directly add tweets to the scroller or create a flyweight list and add the items to that.
The answer is here which is close to Pre101's suggestion.
Here is my working code:
reloadTweets: function(inSender, inEvent) {
this.$.main.createComponent({
kind: "Tweet",
text: "ho ho ho ho"
});
this.render();
}
I am trying to put logic in a css-width in a data-link in jsViews. The two following approaches did not work:
{{for Items}}
...
<td id="show-keys" data-link="css-width{~root.ShowKeys ? '200px' : '400px'}">
or
{{for Items}}
...
<td id="show-keys" data-link="css-width{:~keysWidth()}">
...
<script type="text/javascript">
...
var app = {
...
helpers: {
showKeys: function () {
//debugging shows that this never gets fired
return app.ShowKeys ? '400px' : '100px';
}
How do I appropiatly base a css-value on a property so that it changes dynamically?
Here is a jsfiddle that shows a few variants: http://jsfiddle.net/BorisMoore/GZPvZ/
Your first expression missing a :
data-link="css-width{~root.ShowKeys ? '200px' : '400px'}"
should be
data-link="css-width{:~root.ShowKeys ? '200px' : '400px'}"
For the second approach, using a helper, apart from the naming of the helper (I think you meant it to be keysWidth - as #BKimmel points out) - you need to declare the fact that it is a computed observable with a dependency on ~root.showKeys - which you do like this:
function keysWidth() {
return app.showKeys ? '400px' : '100px';
}
keysWidth.depends = "~root.showKeys"; // or you can write ... = [app, "showKeys"]
Alternatively you can not declare the dependency, but pass it in as an argument:
data-link="css-width{:~keysWidth3(~root.showKeys)}"
Helpers can be declared globally, or passed in with the link call.
See the jsfiddle for details...
Update: There are now some new samples that cover CSS and class binding. There is a tutorial sequence on data-linking, which includes this page on data-linking class, this on on toggling class, and this one on linking to CSS attributes.
At a glance here, I notice two things;
For the second setup, I wouldn't expect that to work as written... your helper function is called showKeys, but in the template you are calling a function called keysWidth... maybe that was just a transcription mistake, but it definitely won't work like that. Change the names so they match (case-sensitive, as always in JS).
Make sure your helpers are actually getting loaded... e.g. $.helpers({helperfunction: function() {...}}) ... sometimes that can cause issues.