Forum Discussion

rostyslavpopov's avatar
rostyslavpopov
Explorer | Level 4
1 year ago

Re: Missing parameter: client_id for lwc

Yes, using apex approach i needed to modify URL by placing client id as first or last URL argument. But I switched to JS SKD approach and its easier in there and provides better user experience

9 Replies

Replies have been turned off for this discussion
  • eappsiadvancenow123's avatar
    eappsiadvancenow123
    New member | Level 1
    1 year ago

    rostyslavpopovThank you so much for your help here! I was able to get the sign url successfully.

    Probably one last question, how are you opening embedded window on your site? When I'm trying to open it in incognito window by appending client_id in url, it gives me this error(attached screenshot).

    I have provided "my.salesforce-sites.com" under Domain in my App.

    Your help in this is very much appreciated!

  • rostyslavpopov's avatar
    rostyslavpopov
    Explorer | Level 4
    1 year ago

    can you provide more details on what are you trying to achieve please?

  • eappsiadvancenow123's avatar
    eappsiadvancenow123
    New member | Level 1
    1 year ago

    I have created a site in salesforce and i want to open embedded signature window on my site. I tried to import JS file available on github in my LWC component but that doesn't work so I'm trying to use iframe and under the iframe, my URL is (sign URL + client_id + skip_domain_verification=1) but its not working. 

    It gives me invalid URL when i open in iframe but same URL works in incognito window or any other window.

    Your help is very much appreciated!

  • rostyslavpopov's avatar
    rostyslavpopov
    Explorer | Level 4
    1 year ago

    okay so for this you need to do the js lib part.
    Go to  https://www.jsdelivr.com/package/npm/hellosign-embedded , there will be an URL in source, go to that URL, copy its content and create a JS file. Upload this file(one file only, no folders) as public Static resource with a name DropboxSign. Then import and load it in your JS file:

    import dropboxSign from '@salesforce/resourceUrl/DropboxSign'; loadScript(this, dropboxSign) .then(() => { // console.log('dropbox sign loaded'); }) .catch(error => { console.error('Error loading dropbox sign:' , error) })

    Loading can be put into connected callback. Then when its time for a sign you need to do a following:

    const client = new HelloSign({ clientId: this.clientId, }); client.open(result, { skipDomainVerification: true })

     

  • eappsiadvancenow123's avatar
    eappsiadvancenow123
    New member | Level 1
    1 year ago

    Thank you very much for your swift responses!

    I'm not sure what I'm doing wrong in the above mentioned steps but the embedded window is not opening. Here is the steps i followed:

    1. I went to this site(attached screenshot) and copied the content and saved it as JS file.
    2. Uploaded this file as Public static resource(the only file)
    3. Imported this file into LWC by 

      import HelloSign from '@salesforce/resourceUrl/DropBoxSign';

    4. Loaded this static resource in connected callback
    5. Promise.all([

              loadScript(this, HelloSign)

            ]).then(() => {

              console.log('JS and Style Resources loaded successfully');

             

            }).catch((error)=>{

              console.log('Error occurred while loading JS resources'+ error);

    6.  

      I have a button "E-sign" on the site, when clicking on that button, I'm calling a function and this is function body:
      createEmbeddedSignatureRequest is apex method which will return sign url.

            createEmbeddedSignatureRequest({leadId: this.leadId}).then(result=>{

              this.signUrl = result;

              console.log('Success createEmbeddedSignatureRequest:'+ this.signUrl);

            }).catch(error=>{

              console.log('Error occurred in createEmbeddedSignature'+ JSON.stringify(error));

            })

            setTimeout(()=>{

              try{

              const client = new HelloSign({ clientId: 'myClientId' });

            client.open(this.signUrl, { skipDomainVerification: true });

              }

              catch(e){

                console.log('Error occurred while opening embedded:'+ JSON.stringify(e));

              }

            },5000);

    rostyslavpopovDo you see any missing item here? Thank you soooooooo much for helping me in this.

  • rostyslavpopov's avatar
    rostyslavpopov
    Explorer | Level 4
    1 year ago
        submitApplication() {
            const client = new HelloSign({
                clientId: this.clientId,
              });
            // Logic for submitting the application
            // console.log('submit');
    
            if(this.hasError == false){
                generateEmbeddedSignUrl({recordId: this.recordId, leadJson: this.getLeadData()})
            .then(result => {
                // console.log('result: ' + result);
                this.iframeUrl = result;
                
                client.open(result, {
                    skipDomainVerification: true
                })
            })
            .catch(error => {
                console.log('error: ' + JSON.stringify(error));
            })
    
            client.on('sign', (data) =>{
                // console.log('signed!');
                this.signed = true;
    
                this.sendDataToEverflow('4')
            })
            client.on('close', () => {
                // console.log('closed');
                if(this.signed == true){
                    let event = new CustomEvent('leadsigned', {detail: this.recordId})
                    this.dispatchEvent(event);
                    updateSigned({recordId: this.recordId})
                }
            })
                
                
            }
        }

    i see that in this example you used 'this.signUrl' for client.open() but in new HelloSign() you used a text, and not a variable with clientId value, if its just a sample code and in actual code that is replaced with client id value then Im not sure whats wrong, I can share my piece that's called when a button is pressed:
    if this doesn't help id advise you opening an another thread and ask a dropbox developer to help with their library usage!

  • eappsiadvancenow123's avatar
    eappsiadvancenow123
    New member | Level 1
    1 year ago

    I think in my code, the line of code which is creating the problem is this: 

    const client = new HelloSign({ clientId: this.clientId, });

    When I'm checking in the console, it gives me an error: d.default is not a constructor.

    I think its not understanding when I'm creating the instance of HelloSign class.

    rostyslavpopovIn your code, you are also assigning iframeURL, are you trying with iframe as well? If yes, does that work for you?

  • eappsiadvancenow123's avatar
    eappsiadvancenow123
    New member | Level 1
    1 year ago

    rostyslavpopovI'm able to figure out why it was not opening the embedded signature. because in my Import alias, i have given "HelloSign" name and there is same class being called so it might be creating confusion for the system.

    I wrote: 

    import HelloSign from '@salesforce/resourceUrl/DropBoxSign';

    and then i was initiating like:

    const client = new HelloSign({ clientId: this.clientId, });

    Once again, thank you very much for your help in this. You're truly  generous. I can't thank enough for helping me out in this. 

  • rostyslavpopov's avatar
    rostyslavpopov
    Explorer | Level 4
    1 year ago

    iframe didnt work for me, because when you open this in frame, you cant check for events like sign, close etc and you cant close a modal or smth when user signs, it n seeds to be a separate button but native close button is still present and this confuses user