ebs.openPdfEditor

(FintechOS Studio 24.4.3 and later)

Opens a PDF document stored in a file attribute in the PDF editor.

Syntax

Copy 
ebs.openPdfEditor(fileInfo : IPdfEditorFileInfo, options? : IPdfEditorOptions): void
 
Parameter Data Type Description
fileInfo IPdfEditorFileInfo Metadata required to locate the PDF document.
options (optional) IPdfEditorOptions Configuration options used to initialize and customize the PDF editor and track file updates.
IMPORTANT!  
Saving a PDF document from the editor changes the file's real name. For subsequent file operations, you can use the listener callback in the options parameter to track the real name updates instead of refreshing the session context.

Returns

void

Opens the PDF editor interface. File save events can be handled through the optional listener callback.

Interfaces

IPdfEditorFileInfo

Metadata for a PDF document stored in a file attribute.

Copy 
interface IPdfEditorFileInfo {
    entityName: string;
    attrName:  string;
    fileRealName: string;
    fileName: string;
    recordId?: string;
    entityExtension?: string;
}
 
Property Type Description
entityName string The name of the entity that owns the file.
attrName string The name of the file-type attribute that stores the file.
fileName string The name of the PDF document.
fileRealName string The full name of the file, including its unique identifier and file extension. The file must be in PDF format.
recordId (optional) string The identifier of the entity record that contains the file.
entityExtension (optional) string If the file is stored in an entity extension, use this to specify the name of the extension.

IPdfEditorOptions

Configuration options used to initialize and customize the PDF editor.

Copy 
interface IPdfEditorOptions {
    containerId?: 'pdf-editor-container' | string;
    theme?: 'light-blue' | 'viewer' | 'light' | 'dark' | 'dark-yellow';
    readOnly?: boolean;
    listener?: (event: IPdfEditorUploadEvent)=>Promise<void> | void;
}
 
Property Type Description
containerId
(optional)		 'pdf-editor-container' | string ID of the DOM element where the editor will be rendered. pdf-editor-container is the ID of the default editor container, which is created automatically.
theme
(optional)		 'light-blue' | 'viewer' | 'light' | 'dark' | 'dark-yellow' Sets the visual theme of the editor. Default: light.
readOnly
(optional)		 boolean

Determines whether the document can be saved:

  • true - disables saving
  • false - saving is enabled
listener
(optional)		 (event: IPdfEditorUploadEvent) => Promise<void> | void

Callback invoked when the PDF editor saves a document. The callback receives an event payload implementing the IPdfEditorUploadEvent interface. It may return a Promise to perform asynchronous operations, otherwise it executes synchronously.

IPdfEditorUploadEvent

Event payload passed to the listener callback when the PDF editor saves a document.

Copy 
interface IPdfEditorUploadEvent {
    data: IPdfEditorFile[] | { error: string };
    context: IPdfEditorFileInfo;
}
 
Property Type Description
data IPdfEditorFile[] | { error: string } Result of the save operation. On success, this contains an array of IPdfEditorFile objects representing the saved files. If an error occurs, the object contains an error property describing the failure.
context IPdfEditorFileInfo Metadata describing the PDF document that was opened in the editor.

IPdfEditorFile

Metadata describing a file saved by the PDF editor.

Copy 
interface IPdfEditorFile {
    Name: string;
    RealName: string;
}
 
Property Type Description
Name string The name of the PDF document.
RealName string

The full name of the file, including its unique identifier and file extension.

IMPORTANT!  
The file's real name changes every time the PDF editor saves the document.

Examples

This example:

  • Uses a button with the openContract ID to open a PDF editor for a contract file attribute displayed on the current form.
  • Uses the formData.model method to retrieve the file's real name.
  • Uses the formData.entityName method to retrieve the name of the parent entity.
  • Uses the formData.id method to retrieve the current record's ID.
  • The PDF editor is displayed in a DOM element with the pdfViewerContainer ID.
Copy 
document.getElementById("openContract").addEventListener("click", function () {
  const fileInfo = {
    fileRealName: JSON.parse(formData.model.contract)[0].RealName,
    entityName: formData.entityName,
    recordId: formData.id,
    attrName: "contract"
  };

  const options = {
    containerId: "pdfViewerContainer",
    readOnly: false
  };

  // Open the PDF viewer/editor
  ebs.openPdfEditor(fileInfo, options);
});

This example demonstrates how to:

  1. Retrieve file metadata from the server.
  2. Open the PDF editor for a specific file.
  3. Track the file's real name changes after the document is saved.
  4. Update the client-side state using the listener callback.

The custom flow includes three components:

  • HTML UI
  • Server automation script
  • Client-side logic

The HTML interface contains a button used to open the editor and a container used to display the current file state.

Copy 
<div>
  <h2>Pdf editor demo</h2>
  <h3>File state:</h3>
  <pre id="file-state">
  </pre>
  <button id="open-pdf-editor">Edit pdf file</button>
</div>

The server automation script retrieves the file attribute for a record identified by an email address and returns the file metadata to the client.

Copy 
try {
   var files = ftos.data.getByQuery({
        "entity": {
        "alias": "a",
        "name": "Account"    
    },
    "attributelist": [
        {
        "name": ftos.context.data.attrFile
        }
    ],
    "where": {
        "type": "and",
        "conditionlist": [{
            "first": "a.Email",
            "type": "equals",
            "second": "val(" + ftos.context.data.email + ")"
        }]
        }
    }
);

setData({files: files });
} catch(excp) {
    ftos.logging.log("Workflow error; error detecting presence in the package of " + item.elementName + ".");
}

The client code retrieves the file information, initializes the editor, and handles updates when the file is saved.

Copy 
const email = "<value >"; // email is used here as a id to query a record
const attrFile = 'FilesRep234';
let state = {
    attrName: attrFile,
    entityExtension: null,
    entityName: 'Account',
    fileName: null,
    fileRealName: null,
    recordId: null,
};

// initialize
ebs.callActionByNameAsync('PdfEditorFileActionDemo', {email : email, attrFile: attrFile }).then(function(emailFiles){
    try{
        const file = JSON.parse(emailFiles.UIResult.Data.files[0].a_FilesRep234)[0];
        state.fileName = file.Name;
        state.fileRealName = file.RealName;
        state.recordId = emailFiles.UIResult.Data.files[0].a_Accountid;
     }catch{
         console.error("could not find file")
     }
});

$("#open-pdf-editor").off().on("click", function () {
    ebs.openPdfEditor(
        state,  { listener: function(ev) {
                try {
                    console.log("Old state: ", state);
                    const newFileDetails = ev?.data.find(file=>file.Name === ev.context.fileName);
                    state.fileRealName = newFileDetails.RealName;
                    console.log("New state: ", state);
                    $("#file-state").text(JSON.stringify(state, null, 4));
                } catch (err) {
                    // treat error
                    console.error('DEBUG: Error trying to update file details to attribute value', err);
                }
            },
            theme: 'dark-yellow',
        });
});