Viewer basics

To use this component, drag the PDFPreviewBlock to the screen.

Once that is done the following parameters must be filled in:

1. Binary and FileName: with your pdf file values.
   
   
2. Width and Height: to define the viewer dimensions.
   1. Here you can pass values in pixels (px), percentage (%) or even viewport height/width (vh, vw)
      
      
3. As alternative to Width and Height, if you want to use a CSS class to configure the viewer dimensions, you can just leave the Height and Width inputs as blank, and set the ExtendedClass, with a valid class where you can set the desired CSS properties
   
   
4. For the viewer to work properly, the site property ClientId (module AdobePDFEmbedAPI_LIB) must be updated in Service Center, with a valid clientId obtained from the Adobe website. (See the section below “Steps to get the ClientId from Adobe” if additional context is required on this)
   1. Example:
      

Additional Properties

1. IsToShowSaveButton: Allows the Viewed save button to become visible one a change is made in a pdf document.
   
   
2. DefaultViewMode: Determines how the PDF is initially displayed to users. As shown below the function DefaultViewMode_GetOptions() from the module AdobePDFEmbedAPI_LIB can be used to pass the correct DefaultViewMode value. (e.g. DefaultViewMode_GetOptions().FIT_WIDTH).
   
   
   
3. Embed Mode: Tells the SDK how to place and size the PDF viewer on your page. As shown below the function EmbedMode_GetOptions() from the module AdobePDFEmbedAPI_LIB should be used to pass the correct EmbedMode value. (e.g. EmbedMode_GetOptions().FULL_WINDOW)
   
   
   
4. CustomizeParameters: Defines If each viewer control option should be visible. The following controls can be shown/hidden:
   1. showZoomControl
   2. EnableFormFilling: Usefull to define view-only vs edit access levels.
   3. showDownloadPDF
   4. showPrintPDF
   5. showAnnotationTools: Controls if the annotations tools should be available, namely comments, sticky notes, highlights, drawing tool, striketrough, and more.

OnPDFSave event

This optional event allows you to implement custom logic to store internally the pdf file edited inside the viewer. It receives as input parameter the binary of the pdf file with the changes made:

Steps to get the ClientId from Adobe

As mentioned above, this component requires an API key to be generated from the Adobe website. To do this the following steps must be executed:

1. Go to the Adobe PDF embedded API documentation page (https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/ )
   
   
2. Select the option Console on the top Right (Requires a valid user account)
   
   
3. In the Console web page, select “Create new project”
   
   
4. In the project Details Page:
   1. Select “Add API”
      
      
      
   2. And from the Add API popup select PDF Embed API and click “Next”
      
      
      
   3. On the Configure API popup screen, ensure that API Key is selected and click next
      
      
      
   4. In the Allowed Domain section, add your OutSystems domain, without https (e.g. my-organization.outsystemscloud.com) and select Save configured API
      
      
      
   5. Important: Only one domain can be added, meaning that one project must be created for each OutSystems environment.
      
      
5. Once the above is done, your API key will be become visible on the page, and you just need to copy it and save it to the ClientId site property