Tuesday, June 15, 2010

CRM 4.0 Network Resource Image Control




As the name suggest this is an on-premise / VPN solution so consider if you need this to work across the web / IFD. The idea is to utilize a simple network share together with VB 6.0 Common Control Open Dialog which can be summoned using JavaScript. The nice thing about the Dialog is that it enables you to see files as thumbnails, set the initial directory and return the selected image path into a text attribute. That’s pretty much what you need to make this work.





You can add an ISV toolbar button to pop the dialog but I find that this solution works hand in glove with the text image button post I wrote a while ago.
Here is what is did in a nutshell:

1. Add a new text attribute. I used the pager attribute on the contact form for the sake of this example.

2. Add a new Fixed Field 1:1 section to the contact form. This is done so the IFRAME
that displays the image will occupy half the screen.



3. Then add a the image IFRAME and pointed it to a default blank.jpg image.



4. Arrange the form attributes as you like … here is what I did.



5. Set the path attribute to read-only so selection is possible only when using the dialog.

6. Add the following code to the contact on load event box.

And Finally don't forget to create a network share anywhere on the server and set appropriate user permission.



That’s it … pretty simple ah … feel free to comment.



TextHelperButton = function(fieldId)
{
var fldButton = this;

fldButton.Field = crmForm.all[fieldId];

if (!fldButton.Field)
{
return alert("Unknown Field: " + fieldId);
}

fldButton.Click = null;
fldButton.Image = new ButtonImage();
fldButton.Paint = function()
{
var field_d = document.all[fldButton.Field.id + "_d"];
if (field_d)
{
field_d.style.whiteSpace = "nowrap";
field_d.appendChild(fldButton.Image.ToObject())
}
}

fldButton.MouseOver = function()
{
event.srcElement.src = fldButton.Image.MouseOver;
}

fldButton.MouseOut = function()
{
event.srcElement.src = fldButton.Image.MouseOut;
}

function ButtonImage()
{
this.MouseOut = "/_imgs/lookupOff.gif";
this.MouseOver = "/_imgs/lookupOn.gif";
this.Width = 21

this.ToObject = function()
{
var img = document.createElement("IMG");
img.onmouseover = fldButton.MouseOver;
img.onmouseout = fldButton.MouseOut;
img.onclick = fldButton.Click;
img.src = this.MouseOut;

var cssText = "vertical-align:bottom;";
cssText+= "margin:1px;";
cssText+= "position:relative;";
cssText+= "right:" + (this.Width + 1) + "px";
img.style.cssText = cssText;
return img;
}
}
}

function OnCrmPageLoad()
{
/* Build the Avatar path attribute Text Helper Button */
var avaterBtn = new TextHelperButton("pager");
avaterBtn.Click = SelectAvatar;
avaterBtn.Paint();

/* Set the avatar IFRAME when the form loads*/
if (crmForm.all.pager.DataValue)
{
document.all.IFRAME_image.src = crmForm.all.pager.DataValue;
}
}

function SelectAvatar()
{
var dialog = new ActiveXObject("MSComDlg.CommonDialog");
/* You may set the filter to only show image files */
dialog.Filter = "All Files (*.*)";
/* Point the dialog to the current (selected) image */
dialog.FileName = document.all.IFRAME_image.src;
dialog.MaxFileSize = 1024;
dialog.ShowOpen();

/* Save the readonly path attribute with the new file selection */
crmForm.all.pager.DataValue = dialog.FileName;
/* Force submit since this is a readonly attribute */
crmForm.all.pager.ForceSubmit = true;
/* Update the image iframe */
document.all.IFRAME_image.src = crmForm.all.pager.DataValue;
}

OnCrmPageLoad();

10 comments:

Vladislav Osmanov said...

True KISS solution! : )

jani said...

Hi.. it luks pretty gud. i'm new to dynamics .. can you please let me know as to how u added the VB 6.0 common control open dialog to ur CRM form? it'l be of gr8 help.. thanks

Oracle Fusion said...

Thanks for the statistics. I discovered your blog very interesting; our java online training supplier won the high common place name through international for its coaching for more information please check the site.
Oracle Fusion HCM Technical Training

Blogger said...

In case you are interested in earning money from your websites/blogs via popup advertisments - you should run with one of the most established companies: PropellerAds.

kirankumar said...

Thank you for blog posting information I liked it
Best Play and Pre School for kids in Hyderabad,India. To give your kid a best environment and learning it is the right way to join in play and pre school were kids can build there physically, emotionally and mentally skills developed. We provide programs to kids like Play Group, Nursery, Sanjary Junior, Sanjary Senior and Teacher training Program.
Preschool in hyderabad

kirankumar said...

Great blog information of the author provided

Pressure Vessel Design Course is one of the courses offered by Sanjary Academy in Hyderabad. We have offer professional Engineering Course like Piping Design Course,QA / QC Course,document Controller course,pressure Vessel Design Course,Welding Inspector Course, Quality Management Course, #Safety officer course.
Welding Inspector Course
Safety officer course
Quality Management Course
Quality Management Course in India

Blogger said...

As stated by Stanford Medical, It is really the SINGLE reason women in this country live 10 years more and weigh 19 kilos lighter than we do.

(And really, it has absoloutely NOTHING to do with genetics or some secret exercise and EVERYTHING to do with "how" they eat.)

P.S, What I said is "HOW", not "what"...

Click this link to uncover if this short test can help you decipher your true weight loss potential

Zoho Partner said...

PARTNER IN DUBAI is a ZOHO Partner for CRM, Desk, Books, Inventory, Salesiq, Marketing Automation,Campaigns etc. Call us for 1Hr free Consulting.

Zoho Partner said...

PARTNER IN DUBAI is a ZOHO Implementation for CRM, Desk, Books, Inventory, Salesiq, Marketing Automation, Campaigns etc. Call us for 1Hr free Consulting.

B.C.A. Time Table 2022 - BCA 1st 2nd 3rd Ka Exam Routine said...

I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article

Cusat University Time Table 2022
Datta Meghe University Time Table 2022
JRRSU Exam Time Table 2022