Skip to main content
Question

Focus View in Angular doesn't work

  • December 16, 2024
  • 3 replies
  • 109 views

Forum|alt.badge.img+1

Import in index.html

<script src='https://js-d.docusign.com/bundle.js'></script>

 

In signing page component:

import { Component, OnInit, input, AfterViewInit } from '@angular/core';
import { Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
declare const DocuSign: any;

@Component({
  selector: 'app-focused-view-signing',
  imports: [],
  templateUrl: './focused-view-signing.component.html',
  styleUrls: ['./focused-view-signing.component.css']
})
export class FocusedViewSigningComponent implements AfterViewInit {
  integrationKey: string = 'xxxx'; // Replace with your integration key

  constructor(private route: ActivatedRoute,) { }

  ngAfterViewInit() {
    const url = this.route.snapshot.paramMap.get('url');
    console.log('Input URL:', url);

    DocuSign.loadDocuSign(this.integrationKey)
      .then((docusign: any) => {
        const signing = docusign.signing({
          url,
          displayFormat: 'focused',
          style: {
            branding: {
              primaryButton: {
                backgroundColor: '#333',
                color: '#fff',
              }
            },
            signingNavigationButton: {
              finishText: 'You have finished the document! Hooray!',
              position: 'bottom-center'
            }
          }
        });

        signing.on('ready', (event: any) => {
          console.log('UI is rendered');
        });

        signing.on('sessionEnd', (event: any) => {
          console.log('sessionend', event);
        });

        signing.mount('#agreement');
      })
      .catch((ex: any) => {
        console.error('Error loading DocuSign:', ex);
      });
  }
}

Result:
I got envelope properly but can’t sign it. The page was not interactive.

 

There’re some error or warning in console:

  1. Error importing mockServiceWorker.js NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': Failed to import 'https://docutest-a.akamaihd.net/integration/1ds/libs/msw/2.2.11/lib/mockServiceWorker.js'. importScripts() of new scripts after service worker installation is not allowed.
  2. translation error (1ds-bindle.js)
  3. [Violation] Permissions policy violation: Geolocation access has been blocked because of a permissions policy applied to the current document. See https://goo.gl/EuHzyv for more details.
  4. Warning: displayFormat focused cannot be used with ERSD

3 replies

Hengfeng Ge
Rising Star
Forum|alt.badge.img+12
  • Rising Star
  • 496 replies
  • December 16, 2024

please confirm the name/email/clientuserid for this recipient is correct. 

FreeLink/甫连信息

🌍 Docusign Partner | Partner Profile

🏆 Docusign 2024 APAC Reseller Growth Partner of the Year

🌟 The only Docusign Partner globally certified as both a Certified eSignature Administrator and eSignature Technical Consultant.

📊 Docusign Community Leaderboard Top 5 contributor.

🚀 Expertise in Docusign integrations with on-premises systems for leading enterprises across various industries.


Forum|alt.badge.img+1
  • Author
  • Newcomer
  • 1 reply
  • December 17, 2024
Hengfeng Ge wrote:

please confirm the name/email/clientuserid for this recipient is correct. 

FreeLink/甫连信息

🌍 Docusign Partner | Partner Profile

🏆 Docusign 2024 APAC Reseller Growth Partner of the Year

🌟 The only Docusign Partner globally certified as both a Certified eSignature Administrator and eSignature Technical Consultant.

📊 Docusign Community Leaderboard Top 5 contributor.

🚀 Expertise in Docusign integrations with on-premises systems for leading enterprises across various industries.

 

I have implemented three types of embedded signing:

  1. Redirect (default)
  2. Using <iframe>
  3. Using focus view

All those approaches is using exactly the same envelope definition. But only the third one is not working.

For focus view, I define request view with:

viewRequest.frameAncestors =
[environment.liffOrigin, 'https://apps-d.docusign.com', 'http://localhost:3000'];

viewRequest.messageOrigins = ['https://apps-d.docusign.com'];

 

Thanks for your help again!


Forum|alt.badge.img+7
  • Docusign Employee
  • 65 replies
  • December 17, 2024

I don't see any particular issues with your code. As the signing page is loaded but not interactive, I assume the issue might be related to the browser. 
Based on our assessment, we suggest initiating a support case with DocuSign. The support team will then guide you through the necessary steps via the case. Here's the link to open the support case with DocuSign: https://support.docusign.com/s/articles/How-Do-I-Open-a-Case-in-the-DocuSign-Support-Center?language=en_US