Google "gview" for Previewing Documents

[SafetyUniversity]

The following shows how to integrate Google view “gview” into your app to preview documents.

You will need to obtain the URL of the document that you have stored in a field of a table in Tadabase. You will use the Tadabse Rest API Pipe to obtain this URL. This URL will then be automatically saved to a text field in the same table that the file is stored in.

• File Field (not Attachments field)
• Text Field
• Tadabase Rest API Pipe
• Custom Component

1. Create a File and Text field in a table in Tadabase.
2. Add the Tadabase Rest API Pipe and set it up with an API Key.
3. In the Rest API Pipe go to “API Calls” and select “Get a Single Record”.
4. Open this option up and proceed to “Response”
5. You are going to click “Add New Response” and input the following information: item.field_XXX.url (change the XXX with the field number of the File field.)
6. You can label the “Field Name” to anything that will trigger you to know what field you are working with. Maintain the “Data Type” as a string.
   
   

Proceed to your Table that has the file field that you want to obtain the URL for in the Data Builder section of Tadabase.

1. Click on “Rules” tab in the table.
2. Click “Add New Rule”
3. Title the rule to a name that will trigger your memory of what it is doing.
4. Select “Created or Edited”
5. Click “Add Pipe”
6. Under “Trigger Pipe” select the Tadabase Rest API pipe
7. Select “Get a Single Record”
8. Add 2 Parameters and select one to be the Table ID and the other to be the Record ID.
9. Select Value Type of “Record” then the corresponding Table or Record ID.
10. Then under “Set Record Values” select the Text field you created that will “hold” the URL of the file. Example in image the text field was titled “File URL”.
11. Select the Value Type to “Pipe Response” and then select the option you made in the Rest API Pipe “Calls” area. This example was “URL-Plans”.
    
    

When a record is created or edited it will capture the URL of the file field you connected through the Rest API Pipe.

Now, create a Details page of a table or list that uses the Data Table that holds the File Field and File URL Text Field.

Add a Custom Component and add the following code:

{{#each records}}

<p><iframe src="https://docs.google.com/gview?url={{field_XXX}}&embedded=true" title="Preview File" width="100%" height="800px"></iframe></p>
{{/each}}

NOTE: field_XXX in this example is the Text Field in your table that holds the File URL from above. You will have to replace the example field with your own.

The end result will show something similar to the image below.

Hope this helps,
Adam