Accessing HTML controls inside iFrame - dynamics-crm-2011

How do you access html controls inside an iframe from javascript in CRM?
I have:
var height = document.getElementById("IFRAME_TransactionProduct_RA").contentWindow.document.getElementById("txt").value;
but that results in "Error on page" and the content is not loaded.
The element I want to access is an html input with id of 'txt':
<input id="txt" type="hidden" />

Here's an example how you copy a value from a CRM field to a control in an embedded HTML control in an IFRAME. I'm assuming the names of the web resource and the field. You'll have to adapt those. You also might throw in a try-catch in case CRM throws in en exception (got the joke?) and please mind that I'm typing the code on my phone so there might be a typo somewhere (auto-correction, yey).
var source = Xrm.Page.data.entity.attributes.get("oneCoolField")
var information = source.getValue();
var customHtml = Xrm.Page.ui.controls.get("WebResource_EmbeddedHtmlContent");
var destination = customHtml.getObject().contentWindow.document;
if(destination) {
var customControl = destination.getElementById("elementToAccess");
if(customControl) {
customControl.value = information;
}
}
EDIT:
This gets you to the web resource.
var customHtml = Xrm.Page.ui.controls.get("WebResource_EmbeddedHtmlContent");
This gets you to the DOM of the IFRAME.
var destination = customHtml.getObject().contentWindow.document;
This gets you to the control on the custom page.
var customControl = destination.getElementById("elementToAccess");
This gets you the contents of the control.
var contents = customControl.innerHTML;
Which part fails on your computer?

With jQuery:
$(Xrm.Page.ui.controls.get('IFRAME_TransactionProduct_RA').getObject()).contents().find('#txt').val();
Pure JS:
Xrm.Page.ui.controls.get('IFRAME_TransactionProduct_RA').getObject().contentWindow.document.getElementById('txt').value;
http://msdn.microsoft.com/en-us/library/gg334266.aspx#BKMK_getObject

Related

angular return uploaded excel file in HTML grid

I am struggling to get my code to display in HTML. I know I am probably missing something really simple, but I am stuck.
I have an Angular 7 app. I want to retrieve the xlsx data (worksheet) and display it in HTML. Simple right? My issue is that all the examples are in browser js and I need to retrieve it from a component. Here's the kicker, I already have the method and can print out json and html via console. log, but cannot find how to return it to an editable grid in HTML.
component.ts
fileUpload() {
let fileReader = new FileReader();
fileReader.onload = (e) => {
this.arrayBuffer = fileReader.result;
var data = new Uint8Array(this.arrayBuffer);
var arr = new Array();
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
var workbook = XLSX.read(bstr, { type: "binary" });
var first_sheet_name = workbook.SheetNames[0];
var worksheet = workbook.Sheets[first_sheet_name];
console.log(XLSX.utils.sheet_to_json(worksheet, { raw: true }));
console.log(XLSX.utils.sheet_to_html(worksheet));
}
fileReader.readAsArrayBuffer(this.file);
}
html
<input type="file" style="display: inline-block;" (change)="incomingfile($event)" placeholder="Upload file" accept=".xls,.xlsx,.ods">
Upload
Currently I can retrieve any workbook/worksheet, but I simply cannot find how to return it to a ui grid of some sort from the .ts file.
I have been through numerous tutorials including ui-grid, ng-grid and https://redstapler.co/sheetjs-tutorial-convert-excel-html-table/
I appreciate I am probably being a dumbass, but any help would be appreciated. I cannot use a commercial component and simply need to render this in an editable table on my html page. I will then look at changing column headers and exporting the file via the backend SpringBoot REST to Mongo (all working)
I am aware that there are numerous similar questions on SO, but the working examples do not seem to display the data(even without any errors). Could be a versioning error etc. I also tried ui-grid, but came up with this issue: 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'. The example here is however also in .js and not via a typescript component: parameter is not of type 'Blob'
I am simply not able to bind the output to the HTML

How to add pass thru html in javascript in a notes rich text item

I am building a XPAGES app. and want to send a url link to the user to specific documents.
In my code I add a rich text style and the link.
The link is not converted to the word "link" with the actual html link on it..
Tried also square brackets around the complete link url.
Any ideas?
var nrtStyle:NotesRichTextStyle = session.createRichTextStyle();
nrtStyle.setPassThruHTML(0);
msgbody.appendStyle(nrtStyle);
msgbody.appendText('link')
Here is the SSJS code to send an email to current user with a link to current XPage:
session.setConvertMIME(false);
var doc:NotesDocument = database.createDocument();
doc.replaceItemValue("Form", "Memo");
var body:NotesMIMEEntity = doc.createMIMEEntity();
var header:NotesMIMEHeader = body.createHeader("Content-Type");
header.setHeaderVal("multipart/mixed");
header = body.createHeader("Subject");
header.setHeaderVal("Link to XPage you visited");
header = body.createHeader("To");
header.setHeaderVal(context.getUser().getDistinguishedName());
var stream:NotesStream = session.createStream();
stream.writeText('Link to XPage');
body.setContentFromText(stream,"text/html;charset=UTF-8", NotesMIMEEntity.ENC_NONE);
stream.close();
doc.send(false);
session.setConvertMIME(true);
It creates a new document with an included MIME entity with header and content.
The email sent contains the HTML link in body:
Look here for more information.
Why try and do this inside a Rich Text? Use an XPages Link control directly on your page.

UWP/WinJS: show a html page in a pop-up window

I am working on a JavaScript based UWP app. Now I need to dynamically show a html page(with a url) in a pop-up window.
I did some search, there is a ContentDialog I can probably use:
var object = new WinJS.UI.ContentDialog(element, options);
but I cannot find any JavaScript sample code for it. I couldn't figure out what should I pass as "element" and how I put the html in ContentDialog.
Thanks in advance for any help.
The WinJS playground shows you how to use the ContentDialog: http://winjs.azurewebsites.net/#contentdialog
The element you pass is the Html element you want to initiate as the dialog.
<div id="myDialog">I am the going to be the dialog content.</div>
 
var element = document.getElementById('myDialog');
var options = {
title: 'Main instruction',
primaryCommandText: 'Ok',
secondaryCommandText: 'Cancel'
};
var dialog = new WinJS.UI.ContentDialog(element, options);
If you want to set the dialog content dynamically you can do so with
var webview = document.createElement('x-ms-webview');
webview.src = 'http://stackoverflow.com';
dialog.element.querySelector('.win-contentdialog-content').appendChild(webview);
dialog.show();

Liferay instanceable portlet does not work properly

I created a custom instanceable portlet, setting the instanceable property to true:
<portlet>
<portlet-name>portletFiltriPTF</portlet-name>
<instanceable>true</instanceable>
<header-portlet-javascript>/js/mediolanumadvice/portletFiltriPTF.js</header-portlet-javascript>
</portlet>
The problem is that I am able to insert the portlet multiple times inside the same page, but only in one of that the content is visible, as you can see in the following image:
Is there anything that I have to do in addition to set that property?
Thank you all,
Marco
Two things to check:
You might have a portlet on page that's (still) non-instanceable because you've added it before you've made your portlet instanceable. They now have different IDs and need to be removed from the page
You might use IDs that are conflicting - e.g. if both portlets create content with the same ID, they'll end up in the DOM. Use these for formatting or any treatment through JS and weird things happen.
I'm not sure if this will help the original poster, but in case anyone else comes across this...
My project is using React and we mount our React root to an element with a static id, referred to as the html root, in index.jsp.
When you try to instantiate multiple instances of the same portlet on one page, subsequent instances will not render because there are multiple elements with the same id.
The solution for this is to create an instance id of your own and create a new element to replace the html root, so that the html root becomes something of a placeholder. Since the html element is removed every time you add a portlet instance, you can reliably mount your React root multiple times without issue.
Here you can see a util I wrote to create a unique root and replace the placeholder (I call it RootUtil):
export default {
makeId: function(length) {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i=0; i < length; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
},
renderRoot: function(placeholderId) {
// create unique id
var instanceId = this.makeId(10);
var id = "react-root-instance-" + instanceId;
// create unique root
var root = document.createElement("div");
root.setAttribute("id", id);
// find placeholder
const placeholder = document.getElementById(placeholderId);
// replace placeholder
//placeholder.replaceWith(root); **breaks in IE**
placeholder.parentElement.replaceChild(root, placeholder); //workaround
// return the new element
return document.getElementById(id);
}}
And I call it here:
ReactDOM.render(
<Provider store={Store}>
<div>
...
</div>
</Provider>,
RootUtil.renderRoot("html-root"));

Include doc link and graphics in email form Xpages

I want to send emails from an Xpage application. Want to include some type of header graphic or HTML styling, and it must include a doc link.
I started using Ulrich Krause's modification of Tony McGuckin's excellent SSJS here
However, I have two issues that I cannot resolve - adding the doc link an and also a graphic.
var doc:NotesDocument = currentDocument.getDocument();
var tmp:String ="A New Location Has Been Created: " + document1.getDocument().getItemValueString("businessUnitName") + ".\n\n" + "Please click this doc link and add any additional approvers ==> ";
emailBean.setSendTo("name#domain.com");
emailBean.setSubject("Lcoations");
emailBean.setSenderEmail("name#domain.com");
emailBean.setSenderName("Locations");
emailBean.setFieldName("Body");
//emailBean.setDocument(document1);
emailBean.addHTML("<table><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table>")
emailBean.addHTML(tmp);
emailBean.setBannerHTML("<table><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table>");
emailBean.setFooterHTML("<p>Kind regards,<br/>Samantha<br/>0012 3456 789</p>");
emailBean.send();
I have commented out the setDocument code as it doesn't work and isn't necessary.
I have an image resource in the db called locations.pgn that I want to include - or I can put it on the web at a url I control.
How do I pass in a doc link? I have computed it, but I just don't now how to add it.
The other method I have tried is a more roll my own.
I have this in a button on the Xpage form:
var doc:NotesDocument = currentDocument.getDocument();
var nteUrl:String = doc.getNotesURL();
var sndTo:String ="name.domain.com";
var sndFrm:String ="ame.domain.com";
var sbj:String ="A New Location Has Been Created: blah blah blah");
var body:String =""A New Location Has Been Created: blah blah blah");
sendEmail(sndTo,sndFrm,sbj,body,doc);
And then my function:
function sendEmail(sndTo,sndFrm,subject,body,trgDoc) {
var doc:NotesDocument = database.createDocument();
doc.replaceItemValue("Form","Memo");
doc.replaceItemValue("Subject",subject);
doc.replaceItemValue("Principal",sndFrm);
doc.replaceItemValue("From",sndFrm);
doc.replaceItemValue("SendTo",sndTo);
doc.replaceItemValue("DisplaySent",sndTo);
doc.replaceItemValue("SMTPOriginator",sndTo);
var memo:NotesRichTextItem = doc.createRichTextItem("Body")
var urlgif="/locations.png";
memo.embedObject(NotesEmbeddedObject.EMBED_OBJECT, "",urlgif,null);
memo.appendText(body);
memo.appendDocLink(trgDoc);
doc.send();
return ;
}
This attaches the file as an attachment, not as a picture. Can't find a method to do that.
I am agnostic about which method I use, I just want to get one nailed down and tightened up so I can use it throughout my applications.
Any help would be greatly appreciated.
You create the email based on HTML with emailBean.addHTML(... your html ...).
Use the syntax
link text
to add links and
<img src="url" ...>
to add images.
Instead of an URL you can code the picture in base64 and include it completely in your html like this
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZ
AQAAAADskrjOAAAAfElEQVR42mNgrDrAwFCbHs/A4Gp8EUgIBAKJSUCiVuY+A
wNjqAMDw//T/xsYDK9nMDB4/zAGSkimMTAIbz/DwHDitRwDg1agNQPD0YTyBoZ
L/ncbGHg3swN1WBcD9f4Lb2CoLS8AmufB3sDgehWo2LXRDSjmtRkoG5TCAACQ
1SM9QzyOtAAAAABJRU5ErkJggg==">

Resources