I'm fairly new to Dynamics Web Resources and with our web developers help I've written 1 to show a DOMO report in an iFrame. Now, I would like to tackle putting a link on a contact record that will pop a new window and allow the user to fill out a custom form that our third party app builder has built. This form can be accessed if I know the user id and the contact id for which I need to take the action on.
Normally a user will click a link inside of an iframe on a contact form and this new window will pop up a web form and they can create what we call a Sales Opportunity. When clicking this link and filling out the form, the form can complete multiple functions. 1. Create a phone call record. 2. Create a sales opportunity. 3. Update the Contact.
I want the link to be in a text URL field so that it can be clicked from an entity view. When the window pops, it pops with the user id and the contact id already in the form and the user can then quickly record the details of the opportunity and phone call.
I've taken the code from another web resource our partner developed and have tried to edit it to fit what I would like, but obviously it's not working (just a blank page).
Is it possible to populate the URL of the web resource in the URL Field on a record and then have that URL pop the custom form with the user and the contact pre-populated?
Here's my current code (that doesn't work):
`
<title>Activity</title>
<script src="../../../../ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script src="../../../scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../../scripts/crmhelper.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var id = window.top.opener.Xrm.Page.data.entity.getId();
Crm.retrieveRecord(id, "ContactSet", successCallback);
});
function successCallback(data, status, request) {
var cId = window.top.opener.Xrm.Page.data.entity.getId();
var user = window.top.opener.Xrm.Page.context.getUserId();
var org = Crm.getServerOnlineOrganization();
var cId2 = = cId.replace(/{|}/g, '');
var url = "https://mycrmurl.com/mscrm/ticketing/Activity/PhoneCallSave.aspx?cId=" + cId2 + "&id=" + cId + "&orgname=" + org + "&userid=" + user + "&token=XYX4RXWf";
$('#iframe1').attr('src', url);
}
</script>
<style type="text/css">
html, body {
overflow: hidden;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
border: 0px;
}
</style>
<iframe id="iframe1" frameborder="0" noresize="noresize"></iframe>
`
You might be better off modifying the ribbon on the entity to include a new button. This button can pass parameters to the web resource
This achieves the following:
Removes the need to have a CRM field containing the Web Resource URL
Simplifies your webresource javascript (i.e. removes dependencies on window.top.opener)
Better supported/standard customisations
To configure your ribbon, download the XrmToolbox and use the Ribbon Workbench plugin
Add a new Button to the ribbon
Configure a Command for the button
Add parameters to the Command. One is PrimaryControl and the other is CommandProperties
Then in your webresource, you should see the querystring has been appended with some new properties. These can be used to get the UserId and RecordId
Related
I had used SpringRestDoc and want to collapse Table of Contents.
Below my index.adoc
= Service Rest Docs API Document
:doctype: book
:icons: font
:source-highlighter: highlightjs
:toc2: left
:theme: flatly
:toclevels: 1
:sectlinks:
[[introduction]]
== information
----
Spring Rest Document
----
...
Thanks,
The default template for Asciidoctor does not include functionality to expand/collapse the ToC. You would need to add your own CSS/JavaScript to achieve that goal.
The simplest way to do that is to use a "docinfo" file. See https://docs.asciidoctor.org/asciidoctor/latest/docinfo/ for details.
Here is a very simplistic implementation that demonstrates the concept:
In your document, in the header (say, just under the :doctype: attribute definition), add the line :docinfo: shared.
Create a file called "docinfo.html" in the same folder as your document; this file contains your custom CSS and JavaScript.
Add the following content to the docinfo.html file:
<style>
button.tocSwitch {
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var target = document.querySelector('#header')
var button = document.createElement('button')
button.className = 'tocSwitch'
button.innerHTML = 'ToC'
button.addEventListener('click', function (e) {
e.stopPropagation()
var toc = document.querySelector('#toc')
var body = document.querySelector('body')
if (body.classList.contains('toc2')) {
body.classList.remove('toc2')
body.classList.remove('toc-left')
toc.style.display = 'none'
}
else {
body.classList.add('toc2')
body.classList.add('toc-left')
toc.style.display = 'block'
}
})
target.appendChild(button)
})
</script>
This content defines some CSS styling for a button, and some JavaScript the dynamically creates the button, adds the button to the header of the page, and an event listener such that when you click the button, the appropriate class name and CSS style adjustments are made to show/hide the ToC.
I am trying to integrate Yammer share button https://developer.yammer.com/docs/share-button, I successfully implemented as instructed, but the only catch is first time it requires two click to fire up, later on single click seems to do the job. Here is the code below.
function clickSaveShare(){
var options = {
customButton : true, //false by default. Pass true if you are providing your own button to trigger the share popup
classSelector: 'homeBtn',//if customButton is true, you must pass the css class name of your button (so we can bind the click event for you)
defaultMessage: 'My custom Message', //optionally pass a message to prepopulate your post
pageUrl: 'www.microsoft.com' //current browser url is used by default. You can pass your own url if you want to generate the OG object from a different URL.
};
yam.platform.yammerShare(options);
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<span href="#" class="homeBtn" onclick="clickSaveShare(339,'Reverse KT')"> Click here to share</a>
<script>
</script>
<script type="text/javascript" src="https://s0.assets-yammer.com/assets/platform_social_buttons.min.js"></script>
<script type="text/javascript">yam.platform.yammerShare();</script>
</body>
</html>
Calling yam.platform.yammerShare() doesn't actually call the share to Yammer function despite its name. What it does is apply a click event to the specified DOM element so that when that element is clicked the Yammer popup will appear.
The reason you have to click the button twice is that the first time clickSaveShare is called, it calls yam.platform.yammerShare() which sets up a click event on the specified DOM element. The next time the button is clicked your click event has been replaced with the Yammer one so it works as expected.
One simple way to fix it given that you are including jQuery would be to use jQuery's document.ready event:
$(document).ready(function() {
var options = {
customButton : true,
classSelector: 'homeBtn',
defaultMessage: 'My custom Message',
pageUrl: 'www.microsoft.com'
};
yam.platform.yammerShare(options);
});
Here is a CodePen example of the above.
I have a GWT widget that I want to embed in a non-GWT application. I am using get-exporter to expose my API and I have the widget appearing in a simple HTML page (which includes my nocache.js) and drawing itself. What it does not do is respond to mouse clicks.
I attach the widget to a div like this (objects are exposed using get-exporter):
controller = new GraphController(MakeGraphConfig.makeGraphConfig());
var element = controller.getGraphPanelElement() ;
document.getElementById('graphPanelId').appendChild(element);
The element 'graph' is a simple div and a direct child of the body element.
<div width="500" height="500" id="graphPaneId" style="border-style: solid; border-width: 11px; "></div>
The widget draws and does not respond to mouse events. What am I missing here?
My solution was to pass the elementId into the controller:
Javascript:
controller = new GraphController("graphPanelId",MakeGraphConfig.makeGraphConfig());
and use :
Java:
RootPanel.get(elementId).add(graphPanel)
I am writing a MVC3 project. Right now I have a table which has column with Data as actionLinks as:
<td style="color: Black; background-color: Bisque; text-align: center; width: 410px">
#Html.ActionLink(#item.LookUp_NameString, "EditPartial", "Capitation", new { id = item.CAPITATION_RATE_ID }, new { #class = "actionLink" })
</td>
EditPartial as the name suggests is a partial view, which I need to be opened as a pop-up menu so that user can edit the details of the object, save it and we can come back to original page.
I have tried the render partial, but can't get it to pass the id value dynamically.
This is for edit functionality of my grid. What will be the best way to implement this?
If you want to open the result of EditPartial Action method in a model popup, you need some model popup code for that.
jQuery UI is one option. http://jqueryui.com/demos/dialog/
1) Include jQuery UI reference in your page,
2) Add the below script to your page which will convert your normal link to a model popup
<script type="text/javascript">
$(function(){
$(".actionLink").click(function (e) {
var url = this.href;
var dialog = $("#dialog");
if ($("#dialog").length == 0) {
dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
}
dialog.load(
url,
{}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
close: function (event, ui) {
dialog.remove();
},
modal: true,
width: 460, resizable: false
});
}
);
return false;
});
});
</script>
From your action result, you can return whatever markup you want to show in the Model popup. Mostly you will be returning a View. If you want to show a partial View,If it is an ajax request and show the normal view if it is a normal request, you can check the Request.IsAjaxRequest method to do that.
public ActionResult EditPartial(int id)
{
CustomerViewModel objCustomer=GetCustomer(id);
if(Request.IsAjaxRequest())
{
return View("Partial/Edit",objCustomer);
}
return View(objCustomer);
}
Assuming you have 2 views present to show your normal page and partial page (for model popup)
I prefer to name my action method as Edit instead of EditPartial, because it is handling both requests (ajax and normal)
Hey frenz In my mvc 3 project i need a pop up box. Actually when the user click the edit button, I need to show the Edit View page as pop up box and save the edited data in database.
Simply, I need to replace the edit view page with edit pop up box.
I know that i need to use ajax and jquery. But confuse how to implement it.
So, Any idea about this will be greatly appreciated
I have also faced such type of situation and I preferred some style sheet instead of using any 3rd party control. I am writing sample code here.
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’”>here</a></p>
<div id=”light” class=”white_content”>This is the lightbox content. <a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none’”>Close</a></div>
<div id=”fade” class=”black_overlay”></div>
</body>
</html>
Onclick event you need to display user control in that div. I have used json object for that. Javascript code is like this.
function ShowPopups(cntrlId, controllerName, actionName, className, id) {
var url = controllerName + "/" + cntrlId;
elementId = id;
$.ajax(
{
type: "POST",
url: "/" + controllerName + "/" + actionName,
data: "Display=" + cntrlId,
dataType: "html",
success: function (result) {
removeClass('light1');
changeClass('light1', className);
document.getElementById('light1').style.display = 'block';
document.getElementById('fade1').style.display = 'block'
$("#light1").html(result);
}
});
}
function HidePopup() {
var url = document.location.hash;
document.getElementById('fade1').style.display = 'none';
document.getElementById('light1').style.display = 'none';
document.location.hash = url;
}
// To Add and Remove class using javascript
function removeClass(elementID) {
var element = document.getElementById(elementID);
element.className = '';
}
function changeClass(elementID, newClass) {
var element = document.getElementById(elementID);
element.className += newClass;
}
you can use JQuery model dialog box(use model form) it is really simple, Here is the documentation with examples. http://jqueryui.com/demos/dialog/#modal-form
I also recommend Jquery UI model dialog still you want to try out something else here is the list of Jquery Model PopUp Samples
So many of the other tutorials don't cover how to actually edit data, only how to show the dialog. When you try to post your form, the entire window will post and change.
jQuery ui's dialog method has some funny behavior at times, and validation won't work by default unless you parse newly loaded content.
With that said, the best overall code I've found recently is this solution here to handle the ajax loading and posting.
http://nickstips.wordpress.com/2011/08/11/asp-net-mvc-ajax-dialog-form-using-jquery-ui/