Skip to main content
Nintex Community Menu Bar
Question

How to get javascript picture loader button to work in Skuid

  • July 9, 2024
  • 12 replies
  • 24 views
K
Forum|alt.badge.img+3

I have a Salesforce app called Picture Uploader with a custom button that works just fine in the native Salesforce UI.  I can’t seem to get working in Skuid.  The custom button is on the Contact object with the following OnClick JavaScript:


var untreatedUrl = “{!URLFOR($SControl.btydev__Picture_Upload_Processor, Contact.Id)}”;
var retUrl = untreatedUrl.replace(///g, ‘%2F’);
var retUrl = retUrl.replace(/?/g, ‘%3F’);
var retUrl = retUrl.replace(/&/g, ‘%26’);
var fullUrl = “/p/attach/NoteAttach?pid={!Contact.Id}&retURL=” + retUrl;

//alert (fullUrl);

parent.window.location.href=“/p/attach/NoteAttach?pid={!Contact.Id}&retURL=” + retUrl + ‘%26autoMapValues=1’;


What I’ve done that isn’t working:

  1. I’ve created an inline snippet with the above code.
  2. I’ve created a custom “run skuid snippet” button that points to the snippet.
I think the part that is not working are the Skuid-specific javascript references that should come first in the snippet before the snippet. 

I welcome your tips.

Thanks!
Krista

    12 replies

    J
    Forum|alt.badge.img+20

    Try this. No javascript necessary.

    <skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true" tabtooverride="Task"> <models> <model id="CurrentContact" limit="1" query="true" createrowifnonefound="false" sobject="Contact" doclone="" type=""> <fields> <field id="Id"/> <field id="Name"/> </fields> <conditions> <condition type="param" value="Id" field="Id" state="" operator="=" enclosevalueinquotes="true" novaluebehavior=""/> </conditions> <actions/> </model> </models> <components> <pagetitle model="CurrentContact"> <maintitle> <template>{{Name}}</template> </maintitle> <subtitle> <template>{{Model.label}}</template> </subtitle> <actions> <action type="redirect" label="Upload Pic" window="self" icon="ui-silk-picture-add" url="https://c.na17.visual.force.com/apex/fileupload?id={{{Id}}}&amp;amp;returl={{{Id}}}"/> </actions> </pagetitle> <template multiple="false" model="CurrentContact" allowhtml="true"> <contents>&amp;lt;iframe src="https://c.na17.visual.force.com/apex/showPicture?id={{{Id}}}&amp;amp;isdtp=nv" width="100%" height="600px" frameborder="false"&amp;gt;&amp;lt;/iframe&amp;gt; </contents> </template> </components> <resources> <labels/> <css/> <javascript/> </resources> </skuidpage>
    J
    Forum|alt.badge.img+20

    Only issue is the URL is static as the visualforce page is force.com hosted. Probably a way to set this by variable, but I don’t know how.

    K
    Forum|alt.badge.img+3

    Thank you so much for providing the code. My apologies in advance for not completely following you.

    In examining the XML code, I’m trying to figure out the bits to drop into my existing page.

    I put the following action code from your page in a section where other buttons are located on my Skuid page:

    <action type=“redirect” label=“Upload Pic” window=“self” icon=“ui-silk-picture-add” url=“https://c.na17.visual.force.com/apex/fileupload?id={{{Id}}}&amp;returl={{{Id}}}”/>;

    Are there any other relevant bits of code I need to add in?

    When I test the updated page with just the action code above, it returns the error:

    Unable to Access PageThe value of the “pid” parameter contains a character that is not allowed or the value exceeds the maximum allowed length. Remove the character from the parameter value or reduce the value length and resubmit. If the error still persists, report it to our Customer Support team. Provide the URL of the page you were requesting as well as any other related information.

    Code with that section is as follows:

    &lt;img src="{{{Profile_Photo_URL__c}}}"&gt; ">https://na2.salesforce.com/_ui/common/data/LookupPage?lkpr={{Id}}&amp;lktp=701&amp;enableSco...; Tasks Events Cases Task History Opportunity Contact Role Attachment CampaignMemberships {{FirstName}} {{LastName}} {{Title}} Account Preferred Email &nbs
    J
    Forum|alt.badge.img+20

    Check out the video and two bits of code.

    Button URL

    https://c.na17.visual.force.com/apex/fileupload?id={{{Id}}}&amp;returl={{{Id}}}

    Template HTML

    <iframe src="https://c.na17.visual.force.com/apex/showPicture?id={{{Id}}}&amp;isdtp=nv" width="100%" height="600px" frameborder="false"></iframe>
    R
    Nintex Employee
    Forum|alt.badge.img+17
    • Rob_HatchNintex Employee
    • Nintex Employee
    • July 9, 2024

    Two notes: 
    1. Make sure the Id field is in your model. 
    2. Beware of absolute URLS.  If Salesforce moves you off of the NA17 instance your link will break.  Much better to use relative urls that look like this: “/apex/c__fileupload?id={{{Id}}}&returl={{{Id}}}”  

    J
    Forum|alt.badge.img+20

    How can we handle issues where the absolute URL can’t be constructed using merge variables alone? As per the “c” in the URL below?

    https://<b>c</b>.na17.visual.force.com/apex/showPicture?id<br>
    M
    Forum|alt.badge.img+9

    I often have URL redirects as a button, so I use the javascript method “window.location.hostname” to build the URL correctly. We also have a custom setting with the orgs instance (na13, cs15 etc.), you can then build a skuid model on the custom setting object and get the correct instance value from the model in a JS snippet.

    J
    Forum|alt.badge.img+20

    Ok. I get the custom setting for the org instance. What I don’t get is how to construct the URL with the “c” at the beginning without actually typing it in to the template.

    K
    Forum|alt.badge.img+3

    I have the same question re: how to render the “c” . . .

    J
    Forum|alt.badge.img+20

    If nothing else, we could make a custom for this. Base URL prefix.

    M
    Forum|alt.badge.img+9

    Sometimes I just fool around with the URL via javascript. This is a snippet that changes the iframe src when you click on the tab containing the iframe for the first time. You can really do anything with JS:

    (function(skuid){&nbsp; &nbsp; var $ = skuid.$;<br>&nbsp; &nbsp; $(function(){<br>&nbsp; &nbsp; &nbsp; &nbsp; $('#myTab').one('tabshow', function(params){<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(params);<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var Id = skuid.$M('Opportunity').getFirstRow().Id;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var sfInstance = skuid.$M('CustomSettings').getFirstRow() .Instance__c;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var iframe = $("#springCM");<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url = '<a href="https://c." title="Link: https://c.">https://c.</a>' + sfInstance + '.visual.force.com/apex /SpringCM_Opportunity?id=' + Id + '&amp;isdtp=mn';<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; iframe.attr("src", url);<br>&nbsp; &nbsp; &nbsp; &nbsp; });<br>&nbsp; &nbsp; });<br>})(skuid);
    M
    Forum|alt.badge.img+9

    If you’re clicking on a button you can make the button call this snippet:

    var params = arguments[0], $ = skuid.$;<br>var Id = skuid.$M('Opportunity').getFirstRow().Id;<br>var sfInstance = skuid.$M('CustomSettings').getFirstRow().Instance__c;<br>url = '<a href="https://c." title="Link: https://c.">https://c.</a>' + sfInstance + '.visual.force.com/apex/Your_URL?id=' + Id;<br>window.location = url;
    Sidebar Buttons
    Nintex Community Home Contact Nintex Support Email Nintex Community Check Nintex Status
    Terms & ConditionsCookie SettingsAccessibility statement