I've created an Office add-in and want to add some html content to the body of the email. This works but the content get somewhat transformed so my css is not working. For some reason the add "x_" as prefix to the attributes (see image)
I'm using the Office.mailbox.item.body.setSelectedDataAsync method to add the html.
You can find the code on GitHub: https://github.com/genevangampelaere/OutlookTrelloAddIn
I don't know why it's adding the x_ prefix, but the main problem is that you are setting css styles, not classes, and that should be in a style attribute not a class attribute.
Office.context.mailbox.item.body.setSelectedDataAsync("<div style=\"border-left-width: 2px;border-left-color: #0067A3;border-left-style: solid;padding-left: 10px;\"><h2>" + card.name + "</h2><div>" + card.desc + "</div></div>", { coercionType: Office.CoercionType.Html });
Here is the answer from Microsoft in their add-in documentation (https://dev.office.com/reference/add-ins/outlook/1.5/Body).
"When working with HTML-formatted bodies, it is important to note that the Body.getAsync and Body.setAsync methods are not idempotent. The value returned from the getAsync method will not necessarily be exactly the same as the value that was passed in the setAsync method previously. The client may modify the value passed to setAsync in order to make it render efficiently with its rendering engine."
Related
I am facing an odd problem. I im trying to parse the following html:
The problem is that when I do
response.xpath('//div//section//div[#id="hiring-candidate-app"]')[0].extract()
I only get
'<div id="hiring-candidate-app"></div>'
instead of all the content under hiring-candidate-app.
I would like to get, for instance, inside-content, but it looks like I am not even getting that in the response. This webpage requires to be logged in, which I am.
Thanks in advance!
It looks like your Xpath is grabbing the right thing. But your issue might have to do with the '[0]' part of the call. I would remove that to get the full content of the div.
It looks like the elements in question sit on an <iframe>, and therefore live in a different context. You need to activate or switch to the context of the iframe, eg. using JavaScript to interact with an iframe and the document inside of it, e.g.
//Note: Assigning document.domain is forbidden for sandboxed iframes, i.e. on stacksnippets
//document.domain = "https://stacksnippets.net";
var ifrm = document.getElementById("myFrame");
// reference to iframe's window
//var win = ifrm.contentWindow;
// reference to document in iframe
var doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document;
// reference an element via css selector in iframe
//var form = doc.getElementById('body > div > div.message');
// reference an element via xpat in iframe
var xpathResult = doc.evaluate("/html/body/div/div[1]", doc, null, XPathResult.ANY_TYPE, null);
<iframe id="myFrame" src="https://stacksnippets.net" style="height:380px;width:100%"></iframe>
However, as you can see when you run the snipped, cross-document interactions are only possible if the documents have the same origin. There are other, more involved methods like the postMessage method that provide the means of interacting cross-domain.
I am using Orbeon forms with Hybris. We have several pages linked together where a user needs to go through them in a sequence (checkout process).
The content of the Orbeon form is dynamically being determined based on actions from previous steps. E.g.
If user adds Product A to the cart on the step 1, only two fields will be visible on the form located on step 2, if he adds another (Product B) on step 1, one more field should be visible on the form.
I am using certain preprocessor class which prefills some of the hidden fields on the form and then the logic for dynamic display is on the Form itself, based on those hidden fields. This works in a simple scenario when moving back and forth, through the steps.
However, the problem is that I need to have a HTML Mini-cart displayed on the page as well (not part of Orbeon Form), which can also trigger adding/removing of the products asynchronously.
So while I am on step 2 where the form is displayed, the user can also remove/re-add some of the products -> therefore, this needs to trigger asynchronous re-rendering of the form and change the display of the form (with new fields added or removed).
I'm using AJAX for this async stuff and the problem I am facing is that a lot of Orbeon-specific Javascript files and variables is being generated when the page loads for the first time, and some random FormID is used. This FormID is different when I retrieve the new form from the back-end and when trying to replace the HTML content I'm getting various errors in the console, because old Form id is used all over the place.
Does anyone have any suggestion if this could be achieved and how to approach this problem?
Update: Example of "hidden" field glass-coverage-selected
<xf:instance id=""fr-form-instance"" xxf:exclude-result-prefixes=""#all"">
<form>
<glass-coverage-selected/>
<section-1>
<massive-exterior-walls/>
</section-1>
...
Later, a bind is created:
<xf:bind id=""section-40-bind"" ref=""section-40"" name=""section-40"" relevant=""instance('fr-form-instance')/glass-coverage-selected = 'yes'"">
<xf:bind id=""previous-glass-insurance-bind"" ref=""previous-glass-insurance"" name=""previous-glass-insurance"">
<xf:required id=""validation-156-validation"" value=""true()""/>
</xf:bind>
And that bind is used to control the visibility of certain section:
<fr:section id=""section-40-control"" bind=""section-40-bind"">
<xf:label ref=""$form-resources/section-40/label""/>
<fr:grid>
<xh:tr>
<xh:td>
<xf:select1 id=""previous-glass-insurance-control"" appearance=""full"" bind=""previous-glass-insurance-bind"" class=""previous-insurance"">
<xf:label ref=""$form-resources/previous-glass-insurance/label""/>
<xf:hint ref=""$form-resources/previous-glass-insurance/hint""/>
<xf:help ref=""$form-resources/previous-glass-insurance/help""/>
<xf:alert ref=""$form-resources/previous-glass-insurance/alert[1]"" validation=""validation-156-validation""/>
<xf:alert ref=""$form-resources/previous-glass-insurance/alert[2]""/>
<xf:itemset ref=""$form-resources/previous-glass-insurance/item"">
<xf:label ref=""label""/>
<xf:value ref=""value""/>
<xf:hint ref=""hint""/>
</xf:itemset>
</xf:select1>
</xh:td>
</xh:tr>
</fr:grid>
</fr:section>
You can manipulate the values of form fields in JavaScript, in the browser. If you want to set the value of "hidden fields", you make sure that those fields as not hidden by putting false() under Visibility for the field in Form Builder. If you do this, for security reasons, the value of the field isn't even sent to the browser by Orbeon Forms, and it can't be set from JavaScript. Instead, to be able to set the value from JavaScript, you need to hide the control with CSS. The simplest way to do this is to add the class xforms-disabled for that field in the Control Settings dialog.
Then, assuming the name of the control in Form Builder is my-control, in JavaScript you can write var control = ORBEON.jQuery('*[id $= "my-control-control"]'); ORBEON.xforms.Document.setValue(control.attr('id'), '42');. Note the -control added at the end of the name of the control. And to test this first, I recommend you don't put the CSS class, so you can more easily see if setting the value works.
For the documentation on the above setValue() and other JavaScript APIs, see the page Client-side JavaScript API.
During the "validate" event, I'm attempting to gain access to the different UI elements within uploader.
As of right now, I only see private methods attached to the this context. Almost all of them are "private".
In the qq.Templating object within fine-uploader I see: getDropProcessing, etc which are the exact methods I need.
Are these exposed anywhere in the event handler, or on the object where I can access them without knowing the exact classes name? Or is there a way to access the selectorClasses object?
Example of what I'm trying to accomplish:
onValidate: function(imgData, btnContainer){
// "this" context is the qq.s3.fineUploader object created.
var uploader = $(this._options.element), // uploader element
processingEl = uploader.fineUploader('getDropProcessing'); // does not exist.
}
To gain access to a file item and its children in Fine Uploader UI, use the getItemByFileId API method. All other elements are represented in your template, so you should be able to select them using whatever class/attribute/ID you have assigned them in your template.
I have textarea which is required field. I've found post suggesting that Dojo doesn't have validation for Textarea, but in Dojo 1.9, there's an argument 'required'.
I've done the following:
new Textarea({required:true, value:""}, query('[name=description]')[0])
but the effect isn't what I've expected. The texarea has red border always, even if the field wasn't focused (as opposite to, for example, ValidationTextBox). But when I call:
form.validate()
the validation is passed even if the texarea is empty.
Is it possible to get Textare behave the same as in ValidationTextBox, or as for now, the validation for that component is not yet ready and I'd have to write custom version (as in linked post) or wait for next Dojo?
I've done it using mixin of SimpleTextArea and ValidationTextArea:
define(["dojo/_base/declare", "dojo/_base/lang", "dijit/form/SimpleTextarea", "dijit/form/ValidationTextBox"],
function(declare, lang, SimpleTextarea, ValidationTextBox) {
return declare('dijit.form.ValidationTextArea', [SimpleTextarea, ValidationTextBox], {
constructor: function(params){
this.constraints = {};
this.baseClass += ' dijitValidationTextArea';
},
templateString: "<textarea ${!nameAttrSetting} data-dojo-attach-point='focusNode,containerNode,textbox' autocomplete='off'></textarea>"
})
})
See also my answer in Dojo validation of a textarea
The power of Dojo lies in extending it with ease. If you really need the required functionality, then implement it. If you design it well, there should be no problem if it actually gets implemented in a new release of Dojo.
If you really want to know if such a feature exists or is in development I suggest looking at http://bugs.dojotoolkit.org. Besides, you can always contribute to the code, that's what open source is meant for.
I would like to add to the answer of Donaudampfschifffreizeitfahrt
instead of "this.baseClass += ' dijitValidationTextArea';"
I would do
this.baseClass = this.baseClass.replace('dijitTextBox', 'dijitValidationTextArea');
because
• we do not need the TextBox class if we have got a textarea mixin
• ! the "rows" parameter is mixed in but not fired/styled if the TextBox class is present ...
I found the following answer when looking for code to navigate the editors text area elements.. The code works, the onlyu problem is i dont understand why..
var documentWrapper = editorname.document; //replace by your CKEDitor instance ID
var documentNode = documentWrapper.$; // or documentWrapper['$'] ;
The answer was got from the folloing stackOverflow link :
ckeditor scrollIntoView to a div element within the editor
In particular could someone explain to me the syntax documentWrapper.$;
Ive no idea what this means??
Thanks
#oggiemc
The "$" represents the actual DOM object that the CKEDITOR class object is pointing to.
In this case you're working with the "CKEDITOR.dom.document" class. Find the documentaion here:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.document.html
Your object named "documentWrapper" is a CKEDITOR object. It would have any properties described in the CKEDITOR API docs for that class object. You would also use CKEDITOR methods on it.
When you work with "documentWrapper.$", you're working with a DOM object that's described in the Document Object Model Specifications. See Specs here:
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/
This object will have the properties described for this object type in the DOM specs. You wouldn't use CKEDITOR methods on this object, you would use the methods described in the DOM specs for this object type.
So the "$" is a generic representaion of whichever DOM object (document, head, body, div, span, p, etc.) the CKEDITOR class object is pointing to.
documentWrapper.someFunction(); would use a CKEDITOR method on a CKEDITOR class object.
documentWrapper.$.someFunction(); would use a DOM method on a DOM object.
Joe
Difference between editor passed as argument to plugins/dialogs and editor returned by getParentEditor().
They would usually be the same object. But if you have multiple editor instances on one page, you need to use getParentEditor to make sure you're working with the correct editor instance.
Especially if multiple editors are sharing one toobar: How Do I Get Multiple CKEditor Instances to Share the Same Toolbar?
http://docs.cksource.com/CKEditor_3.x/Howto/Shared_Toolbar
You can take a look at the code for dialog radio buttons in the CKEditor directory:
ckeditor\_source\plugins\forms\dialogs\radio.js
Or on the docs site:
http://docs.cksource.com/ckeditor_api/symbols/src/plugins_forms_dialogs_radio.js.html
When the plugin is loaded it uses the active editor instance to load the text for the title and labels because they will be the same for all the instances sharing the toolbar:
ckeditor_source\plugins\forms\dialogs\radio.js(5):
CKEDITOR.dialog.add( 'radio', function( editor )
(42) label : editor.lang.checkboxAndRadio.radioTitle,
(43) title : editor.lang.checkboxAndRadio.radioTitle,
But for the methods used in the dialog, it uses getParentEditor(), so that the actions will be performed on the correct editor instance:
ckeditor_source\plugins\forms\dialogs\radio.js(30):
editor = this.getParentEditor();
(22) onOk : function() ........ editor = this.getParentEditor();
Joe