3. Initialize Document

A Document represents a shared collaborative space where users can interact. Documents live inside the Organization.

Learn more about documents here.

The Set Document method takes two parameters:

• documentId: The unique identifier for the document.
• metadata: (optional) This is a key/value pair object where you can set metadata about the document such as documentName. documentName is a special field that we use to display the document name in some Velt Components.

The SDK will not work without this call.

1. Initialize Document for the current Organization

• By default, users can only access documents within their own organization. Use this to set the document for the current organization the user is logged into.

React / Next.js with Hooks

It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider.

Realistically, these steps should be done inside your component that represents your document.

import { useSetDocument } from '@veltdev/react';
useSetDocument('unique-document-id', {documentName: 'Document Name'});

React / Next.js

It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider.

Realistically, these steps should be done inside your component that represents your document.

const { client } = useVeltClient();

useEffect(() => {
    if (client) {
        client.setDocument('unique-document-id', {documentName: 'Document Name'});
    }
}, [client]);

HTML

if(Velt){
    Velt.setDocument('unique-document-id', {documentName: 'Document Name'});
}

Angular

if (this.client) {
  this.client.setDocument('unique-document-id', {documentName: 'Document Name'});
}

Vue.js

if (client) {
  client.setDocument('unique-document-id', {documentName: 'Document Name'});
}

2. Initialize Document for a different Organization

• Use this to access a document from an organization different than the one the user is logged into.
• You can enable cross-organization access by specifying the organizationId of the target document in the document metadata.
• Ensure that the user has access to the target document in the target organization.

React / Next.js with Hooks

It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider.

Realistically, these steps should be done inside your component that represents your document.

import { useSetDocument } from '@veltdev/react';
useSetDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_ID'});

React / Next.js

It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider.

Realistically, these steps should be done inside your component that represents your document.

const { client } = useVeltClient();

useEffect(() => {
    if (client) {
        client.setDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_ID'});
    }
}, [client]);

HTML

if(Velt){
    Velt.setDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_ID'});
}

Angular

if (this.client) {
  this.client.setDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_ID'});
}

Vue.js

if (client) {
  client.setDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_ID'});
}

React / Next.js with Hooks

// 1) Create a component that will represent your document 

//Warning: Make sure this is a child component to VeltProvider 
//and not within the same file where VeltProvider is placed.

// 2) Import the useSetDocument hook
import { useSetDocument } from '@veltdev/react';

export default function YourDocument() {

  // 3) Set a document ID
  useSetDocument('unique-document-id', {documentName: 'Document Name'});

  return (
    <div>
      //your document template - add Velt Components here
    </div>
    
  );
}