Listagem de envelopes

É possível criar uma página de listagem de envelopes de uma aplicação, que permite visualizar os envelopes e realizar algumas ações de acordo com o modo de listagem:

Listagem por aplicação;
Listagem pelo criador do envelope;
Listagem pelo signatário do envelope;

Cancelar assinaturas

Somente disponível para envelopes listados utilizando creatorNonce;

Cancela o envelope e remove os documentos originais e assinados;
Após o cancelamento de um envelope não é mais possível realizar assinaturas e nem obter o documento finalizado;

Notificar assinantes

Somente disponível para envelopes listados utilizando creatorNonce;

Envia a notificação configurada para os próximos signatários do envelope;

Baixar relatórios de assinatura

Disponível para envelopes listados utilizando creatorNonce, ou para envelopes listados com signerEmail/signerNonce em que o signatário tenha permissão de baixar os relatórios de assinatura;

Realiza download dos relatórios de evidências do envelope; É gerado um relatório para cada documento do envelope;

Acessar página de edição

Somente disponível para envelopes listados utilizando creatorNonce;

Dispara um evento para acesso ao link com a página de edição do envelope;

A aplicação que está exibindo a listagem é responsável por tratar o evento e exibir a tela de edição;

Evento:

{
  event: "easy.list.editUrl",
  requestId: "request id do envelope",
  linkEdit: "link para acesso a tela de edição do envelope"
}

Realizar assinaturas

Somente disponível para envelopes listados utilizando signerEmail/signerNonce em que seja possível o signatário realizar sua assinatura;

Dispara um evento para acesso ao(s) link(s) de assinatura;

A aplicação que está exibindo a listagem é responsável por tratar o evento e exibir a tela de assinatura;

Evento:

{
  event: "easy.list.sign",
  nextSignatures: 
  [
    {
        requestId: "request id do envelope",
        signerNonce: "Nonce do signatário",
        signerEmail: "Email do signatário, caso esteja definido",
        link: "link para acesso a tela de assinatura do signatário",
        iframe: "link para acesso a tela de assinatura do signatário como iframe"
    }
  ]
}

Integração utilizando IFrame

É possível carregar a tela de listagem dentro da própria aplicação. Para isso, o link de acesso a tela deve ser gerado e carregado dentro de um iframe.

Para realizar algumas ações, é necessário que a aplicação defina o comportamento realizando o tratamento do evento relacionado.

O exemplo abaixo pode ser utilizado, substituindo a variável URL_PARA_PAGINA_DE_LISTAGEM pelo valor do link de acesso a tela.

<!DOCTYPE html>
<html>
<!-- Estilização CSS opcional para fazer o iframe ocupar 100% do body da sua aplicação -->
<style>
#easySignIframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
</style>

<!-- Div necessária para criação do <iframe/> -->
<body>
  <div id="listing-div"></div>
</body>
<script>
  // const listingLink = Este link referencia a página que será carregada para realizar a listagem do envelope.
  const listingLink = "{URL_PARA_PAGINA_DE_LISTAGEM}";

  // Constantes para setar a largura e altura do <iframe/> na sua aplicação
  const width = "1025";
  const height = "500";

  // Gera o iframe
  iframe = document.createElement("iframe");
  iframe.setAttribute("src", listingLink);
  iframe.setAttribute("id", "easySignIframe");

  // Estilização do iframe
  iframe.setAttribute("width", width);
  iframe.setAttribute("height", height);
  iframe.style.border = 0;

  // Insere o iframe na página
  const container = "listing-div";
  const cont = document.getElementById(container);
  if (cont) {
    cont.appendChild(iframe);
  }

  // Função de callback para receber os eventos da página de listagem. Os eventos contém uma string no campo 'event' informando o tipo de evento que ocorreu. Cada tipo de evento podem conter informações adicionais:
  // - "easy.list.editUrl": Foi gerado um novo link de acesso a página de edição para um envelope; Campos adicionais:
  //      requestId: request id do envelope;
  //      linkEdit: link para acesso a tela de edição do envelope;
  // - "easy.list.sign": Foi gerado um novo link de acesso a página de edição para um envelope; Campos adicionais:
  //      nextSignatures: array com as informações sobre links de assinatura; Itens com campos:
  //          requestId: request id do envelope;
  //          signerNonce: nonce do signatário;
  //          signerEmail: Email do signatário, caso esteja definido;
  //          link: link para acesso a tela de assinatura do signatário;
  //          iframe: link para acesso a tela de assinatura do signatário como iframe;
  // Neste exemplo os links são abertos em uma nova aba.
  // Você pode tratar este evento da maneira que desejar na sua aplicação (redirecionamento do usuário, abertura do link como outro iframe, dentre outros)
  window.addEventListener(
      "message",
    (event) => {
          if (event.data.event === "easy.list.editUrl") {
              console.log("Novo link para página de edição do envelope", event.data.requestId);
              window.open(event.data.linkEdit, "_blank");
          } else if (event.data.event === "easy.list.sign") {
              event.data.nextSignatures.forEach(nextSignature => {
                  console.log("Novo link para assinatura do envelope", nextSignature.requestId, "pelo signatário", nextSignature.signerNonce);
                  window.open(nextSignature.link, "_blank");
              })
          }
        },
      false
  );
</script>
</html>