How to get javascript picture loader button to work in Skuid

krista06880krista06880 Member
edited June 25 in Questions
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

Comments

  • Pat VachonPat Vachon Member ✭✭
    edited June 25
    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;returl={{{Id}}}"/>           </actions>        </pagetitle>        <template multiple="false" model="CurrentContact" allowhtml="true">           <contents>&lt;iframe src="https://c.na17.visual.force.com/apex/showPicture?id={{{Id}}}&amp;isdtp=nv" width="100%" height="600px" frameborder="false"&gt;&lt;/iframe&gt;  </contents>        </template>     </components>     <resources>        <labels/>        <css/>        <javascript/>     </resources>  </skuidpage>
     


  • Pat VachonPat Vachon Member ✭✭
    edited January 2016
    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.
  • krista06880krista06880 Member
    edited November 2014
    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:

    <skuidpage showsidebar="true" showheader="true" tabtooverride="Contact" unsavedchangeswarning="" theme="Classic">
       <models>
          <model id="ContactData" limit="1" query="true" createrowifnonefound="false" sobject="Contact">
             <fields>
                <field id="FirstName"/>
                <field id="LastName"/>
                <field id="CreatedDate"/>
                <field id="AccountId"/>
                <field id="Account.Name"/>
                <field id="Email"/>
                <field id="MailingCity"/>
                <field id="MailingCountry"/>
                <field id="MailingState"/>
                <field id="MailingStreet"/>
                <field id="MailingPostalCode"/>
                <field id="Phone"/>
                <field id="MobilePhone"/>
                <field id="HomePhone"/>
                <field id="OtherPhone"/>
                <field id="CreatedById"/>
                <field id="CreatedBy.Name"/>
                <field id="LastModifiedById"/>
                <field id="LastModifiedBy.Name"/>
                <field id="LastModifiedDate"/>
                <field id="OwnerId"/>
                <field id="Owner.Name"/>
                <field id="ReportsToId"/>
                <field id="ReportsTo.Name"/>
                <field id="Title"/>
                <field id="Fax"/>
                <field id="OtherCity"/>
                <field id="OtherCountry"/>
                <field id="OtherState"/>
                <field id="OtherStreet"/>
                <field id="OtherPostalCode"/>
                <field id="LeadSource"/>
                <field id="Department"/>
                <field id="Description"/>
                <field id="Birthdate"/>
                <field id="Profile_Photo_URL__c"/>
                <field id="EmailBouncedDate"/>
                <field id="EmailBouncedReason"/>
                <field id="StrikeForce2__Verify_Email_Address__c"/>
                <field id="Other_Email__c"/>
                <field id="Personal_Email__c"/>
                <field id="Preferred_Phone__c"/>
                <field id="Name"/>
                <field id="Linkedin__c"/>
                <field id="Google_URL__c"/>
                <field id="Facebook__c"/>
                <field id="Twitter__c"/>
                <field id="Skype_Name__c"/>
                <field id="Twitter_Username__c"/>
                <field id="Blog__c"/>
                <field id="Corporate__c"/>
                <field id="Home_Page__c"/>
                <field id="Instagram__c"/>
                <field id="Pinterest__c"/>
                <field id="Resume__c"/>
                <field id="Wikipedia__c"/>
                <field id="Contact_Alias_Name__c"/>
                <field id="Company_Location__c"/>
                <field id="Gender__c"/>
                <field id="Ethnicity__c"/>
                <field id="Dotted_Line_Direct_Superior__c"/>
                <field id="Dotted_Line_Direct_Superior__r.Name"/>
                <field id="Referred_By__c"/>
                <field id="Referred_By__r.Name"/>
                <field id="Spouse__c"/>
                <field id="Spouse__r.Name"/>
                <field id="Spouse_Kids__c"/>
                <field id="Biography__c"/>
                <field id="Org_Chart_Intelligence__c"/>
                <field id="Intelligence__c"/>
                <field id="Resume_Text__c"/>
                <field id="Education_Level__c"/>
                <field id="Contact_Type__c"/>
                <field id="Client_Contact__c"/>
                <field id="Candidate_Screened__c"/>
                <field id="Candidate_Placed__c"/>
                <field id="Candidate_Appraisal__c"/>
                <field id="Base_Salary__c"/>
                <field id="Bonus_Percentage__c"/>
                <field id="Bonus_Potential__c"/>
                <field id="Total_Comp_Potential__c"/>
                <field id="Total_Compensation__c"/>
                <field id="Equity_Total__c"/>
                <field id="Equity_Details__c"/>
                <field id="Compensation_Details__c"/>
                <field id="CampaignMembers" type="childRelationship">
                   <fields>
                      <field id="CampaignId"/>
                      <field id="Id"/>
                      <field id="Candidate_Type__c"/>
                      <field id="Applicant_Comment__c"/>
                      <field id="ContactId"/>
                      <field id="Date_Client_Interview1__c"/>
                      <field id="Date_Client_Interview_2__c"/>
                      <field id="Date_Client_Phone_Screen__c"/>
                      <field id="Date_Hired__c"/>
                      <field id="Date_Presented__c"/>
                      <field id="Date__c"/>
                      <field id="Date_Start__c"/>
                      <field id="Status"/>
                      <field id="Recruitability_Comments__c"/>
                   </fields>
                </field>
                <field id="PhotoUrl"/>
                <field id="Function__c"/>
                <field id="GitHub__c"/>
                <field id="about_me__c"/>
                <field id="Stack_Overflow__c"/>
                <field id="Source_URL__c"/>
                <field id="Quora__c"/>
                <field id="Press_Release__c"/>
                <field id="StrikeForce2__EmailVerification_Simple_Result__c"/>
                <field id="Verification_Date__c"/>
                <field id="Verification_Source__c"/>
                <field id="MailingStateCode"/>
                <field id="OtherStateCode"/>
                <field id="OtherCountryCode"/>
                <field id="OtherAddress"/>
                <field id="Home_Zip__c"/>
                <field id="MailingCountryCode"/>
                <field id="NoLinkedInProfileFound__c"/>
                <field id="Awards__c"/>
                <field id="Specialties__c"/>
                <field id="Responsibilities__c"/>
                <field id="Career_Start_Date__c"/>
                <field id="Management_Start_Date__c"/>
                <field id="Age__c"/>
             </fields>
             <conditions>
                <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
             </conditions>
             <actions/>
          </model>
          <model id="Tasks" limit="100" query="true" createrowifnonefound="false" orderby="ActivityDate DESC" sobject="Task">
             <fields>
                <field id="Subject"/>
                <field id="ActivityDate"/>
                <field id="WhatId"/>
                <field id="Priority"/>
                <field id="OwnerId"/>
                <field id="Owner.Name"/>
                <field id="WhoId"/>
                <field id="Who.Name"/>
             </fields>
             <conditions>
                <condition type="param" value="Id" field="WhoId" operator="=" enclosevalueinquotes="true"/>
                <condition type="fieldvalue" value="false" enclosevalueinquotes="false" field="IsClosed"/>
             </conditions>
             <actions/>
          </model>
          <model id="Events" limit="100" query="true" createrowifnonefound="false" orderby="LastModifiedDate DESC" sobject="Event">
             <fields>
                <field id="Subject"/>
                <field id="CreatedDate"/>
                <field id="OwnerId"/>
                <field id="Owner.Name"/>
                <field id="Description"/>
                <field id="StartDateTime"/>
                <field id="EndDateTime"/>
             </fields>
             <conditions>
                <condition type="param" value="Id" field="WhoId" operator="=" enclosevalueinquotes="true"/>
             </conditions>
             <actions/>
          </model>
          <model id="Task History" limit="100" query="true" createrowifnonefound="false" orderby="ActivityDate DESC" sobject="Task">
             <fields>
                <field id="Subject"/>
                <field id="WhatId"/>
                <field id="Type"/>
                <field id="Priority"/>
                <field id="ActivityDate"/>
                <field id="OwnerId"/>
                <field id="Owner.Name"/>
                <field id="What.Name" targetobjects="Account"/>
             </fields>
             <conditions>
                <condition type="param" value="Id" field="WhoId" operator="=" enclosevalueinquotes="true"/>
                <condition type="fieldvalue" value="true" enclosevalueinquotes="false" field="IsClosed"/>
             </conditions>
             <actions/>
          </model>
          <model id="Opportunity Contact Role" limit="100" query="true" createrowifnonefound="false" orderby="LastModifiedDate DESC" sobject="OpportunityContactRole">
             <fields>
                <field id="OpportunityId"/>
                <field id="Opportunity.Name"/>
                <field id="Opportunity.AccountId"/>
                <field id="Opportunity.Account.Name"/>
                <field id="Opportunity.Amount"/>
                <field id="Opportunity.LeadSource"/>
                <field id="Opportunity.StageName"/>
                <field id="Opportunity.CloseDate"/>
                <field id="Role"/>
             </fields>
             <conditions>
                <condition type="param" value="Id" field="ContactId" operator="=" enclosevalueinquotes="true"/>
             </conditions>
             <actions/>
          </model>
          <model id="Attachment" limit="100" query="true" createrowifnonefound="false" orderby="LastModifiedDate DESC" sobject="Attachment">
             <fields>
                <field id="Body"/>
                <field id="Description"/>
                <field id="Name"/>
                <field id="ContentType"/>
                <field id="LastModifiedDate"/>
                <field id="CreatedDate"/>
                <field id="CreatedById"/>
                <field id="OwnerId"/>
                <field id="Owner.Name"/>
                <field id="ParentId"/>
             </fields>
             <conditions>
                <condition type="param" value="Id" field="ParentId" operator="=" enclosevalueinquotes="true"/>
             </conditions>
             <actions/>
          </model>
          <model id="EmailtoSF" limit="100" query="true" createrowifnonefound="false" orderby="LastModifiedDate DESC" sobject="EmailServicesAddress">
             <fields>
                <field id="LocalPart"/>
                <field id="EmailDomainName"/>
             </fields>
             <conditions>
                <condition type="userinfo" value="" field="RunAsUserId" operator="=" enclosevalueinquotes="true" userinfotype="userid"/>
                <condition type="fieldvalue" value="true" enclosevalueinquotes="false" field="IsActive"/>
                <condition type="fieldvalue" value="EmailToSalesforce" enclosevalueinquotes="true" field="Function.FunctionName"/>
             </conditions>
             <actions/>
          </model>
       </models>
       <components>
          <pagetitle model="ContactData">
             <maintitle>&lt;img src="{{{Profile_Photo_URL__c}}}"&gt;</maintitle>
             <actions>
                <action type="redirect" label="Add to Campaign" icon="ui-silk-email-add" url="https://na2.salesforce.com/_ui/common/data/LookupPage?lkpr={{Id}}&amp;lktp=701&amp;enableSco...;
                <action type="clone" icon="ui-silk-arrow-divide" label="Clone" url="/apex/skuid__ui?page=ContactClone&amp;id={{Id}}"/>
                <action type="share"/>
                <action type="delete"/>
                <action type="savecancel" label="New Action" afterSave="">
                   <models>
                      <model>Tasks</model>
                      <model>Events</model>
                      <model>Cases</model>
                      <model>Task History</model>
                      <model>Opportunity Contact Role</model>
                      <model>Attachment</model>
                      <model>CampaignMemberships</model>
                   </models>
                </action>
                <action type="redirect" label="Revert to Salesforce UI" icon="ui-silk-wand" window="self" url="/{{Id}}?nooverride=1"/>
                <action type="custom" window="self" weblinkname="Candidate_Dossier" weblinkobject="Contact" icon="ui-silk-user-go" snippet="UploadPhoto" label="Upload Photo"/>
             </actions>
             <subtitle>{{FirstName}} {{LastName}}
    {{Title}}</subtitle>
          </pagetitle>
          <tabset rememberlastusertab="true" renderas="">
             <tabs>
                <tab name="Contact" icon="ui-silk-user">
                   <components>
                      <tabset rememberlastusertab="true" renderas="">
                         <tabs>
                            <tab name="Data Entry">
                               <components>
                                  <basicfieldeditor showsavecancel="false" showheader="true" model="ContactData" mode="read" buttonposition="" layout="">
                                     <columns>
                                        <column width="50%">
                                           <sections>
                                              <section title="Data Entry" collapsible="no">
                                                 <fields>
                                                    <field id="Name"/>
                                                    <field id="Gender__c"/>
                                                    <field id="Ethnicity__c" showhelp="true"/>
                                                    <field id="Title" showhelp="true"/>
                                                    <field id="AccountId" valuehalign="" type="">
                                                       <label>Account</label>
                                                    </field>
                                                    <field id="Company_Location__c"/>
                                                 </fields>
                                              </section>
                                           </sections>
                                        </column>
                                        <column width="50%">
                                           <sections>
                                              <section title="Data Entry*" collapsible="no">
                                                 <fields>
                                                    <field id="Email" showhelp="true" valuehalign="" type="">
                                                       <label>Preferred Email</label>
                                                    </field>
                                                    <field id="StrikeForce2__Verify_Email_Address__c" valuehalign="" type=""/>
                                                    <field id="StrikeForce2__EmailVerification_Simple_Result__c" valuehalign="" type=""/>
                                                    <field id="Birthdate" valuehalign="" type=""/>
                                                    <field id="Career_Start_Date__c" showhelp="true" valuehalign="" type=""/>
                                                    <field id="Management_Start_Date__c" showhelp="true" valuehalign="" type=""/>
                                                 </fields>
                                              </section>
                                           </sections>
                                        </column>
                                     </columns>
                                  </basicfieldeditor>
                                  <basicfieldeditor showheader="true" showsavecancel="true" model="ContactData" buttonposition="" mode="read" layout="">
                                     <columns>
                                        <column width="50%">
                                           <sections>
                                              <section title="Section A" collapsible="no">
                                                 <fields>
                                                    <field id="Education_Level__c" showhelp="true" valuehalign="" type=""/>
                                                    <field id="Function__c"/>
                                                 </fields>
                                              </section>
                                           </sections>
                                    &nbs
  • Pat VachonPat Vachon Member ✭✭
    edited January 2016
    Check out the video and two bits of code. 

    Button URL
    https://c.na17.visual.force.com/apex/fileupload?id={{{Id}}}&returl={{{Id}}}
    Template HTML
    <iframe src="https://c.na17.visual.force.com/apex/showPicture?id={{{Id}}}&isdtp=nv" width="100%" height="600px" frameborder="false"></iframe>


  • Rob HatchRob Hatch Skuad, Sonar ✭✭
    edited September 2016
    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}}}"  
  • Pat VachonPat Vachon Member ✭✭
    edited January 2016
    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://c.na17.visual.force.com/apex/showPicture?id
  • Moshe KarmelMoshe Karmel Member
    edited December 2014
    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.
  • Pat VachonPat Vachon Member ✭✭
    edited January 2016
    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.
  • krista06880krista06880 Member
    edited December 2014
    I have the same question re: how to render the "c" . . .
  • Pat VachonPat Vachon Member ✭✭
    edited January 2016
    If nothing else, we could make a custom for this. Base URL prefix.
  • Moshe KarmelMoshe Karmel Member
    edited December 2014
    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){    var $ = skuid.$;
        $(function(){
            $('#myTab').one('tabshow', function(params){
                console.log(params);
                var Id = skuid.$M('Opportunity').getFirstRow().Id;
                var sfInstance = skuid.$M('CustomSettings').getFirstRow() .Instance__c;
                var iframe = $("#springCM");
                url = 'https://c.' + sfInstance + '.visual.force.com/apex /SpringCM_Opportunity?id=' + Id + '&isdtp=mn';
                iframe.attr("src", url);
            });
        });
    })(skuid);
  • Moshe KarmelMoshe Karmel Member
    edited December 2014
    If you're clicking on a button you can make the button call this snippet:
    var params = arguments[0], $ = skuid.$;
    var Id = skuid.$M('Opportunity').getFirstRow().Id;
    var sfInstance = skuid.$M('CustomSettings').getFirstRow().Instance__c;
    url = 'https://c.' + sfInstance + '.visual.force.com/apex/Your_URL?id=' + Id;
    window.location = url;
Sign In or Register to comment.