Guide to: How to Display Data with SDA

Overview

When utilizing Appen's Secure Data Access (SDA), your team maintains complete control over your source data, ensuring it never leaves your servers. This guide will walk you through how to properly design and access your data in an ADAP task using SDA.

Understanding Secure Data Access

SDA provides enhanced security through the following features:

• Your content remains on your servers and is rendered through signed URLs
• Signed URLs expire immediately after content rendering
• Your content is never stored or saved within Appen
• Content is only rendered to authenticated contributors and requestors with specific task access

Implementation Guide

General Structure

All SDA implementations use the secure filter with a storage name parameter. The basic syntax is:

{{source_url | secure: 'your_storage_name'}}

Supported Data Types and Implementation

1. Images

<div class="row-fluid">
 <img src="{{image_url | secure: 'your_storage_name'}}" width="100%"/>
</div>

Best practices:

• Use appropriate width/height attributes for your use case
• Consider adding alt text for accessibility
• Test with various image sizes to ensure proper display

2. Video Content

<div class="row-fluid">
 <video src="{{video_url | secure: 'your_storage_name'}}"  width="100%"  preload="auto"  controls="true"/>
</div>

Important considerations:

• Enable controls for better user experience
• Preload is set to auto
• Consider adding fallback content for unsupported browsers

3. Audio Files

<div class="row-fluid">
 <audio src="{{audio_url | secure: 'your_storage_name'}}"  preload="auto"  controls="true" />
</div>

Key features:

• Built-in player controls
• Preloading is set to auto
• Compatible with major audio formats

4. Text Files

<div class="row-fluid">
 <h2>Text Display:</h2>
 <div class="external_txt error" data-url="{{text_url | secure: 'your_storage_name'}}"></div>
 <br/>
 <cml:smart_text label="Editable Text" name="txt_annotation" task-type="qa"  review-data="{{text_url | secure: 'your_storage_name'}}"  disable-pasting="false"  rich="true"  validates="required" />
 <cml:checkbox  label="Sample Field"  name="txt_check"  value="true"  validates="required" />
</div>

Additional capabilities:

• Support for editable text through cml:smart_text
• External text display with error handling
• Smart text component for annotations
• Rich text editing capabilities
• Optional validation and paste control

5. JSON Data

<div class="row-fluid"> 
 <h2>JSON Display:</h2>
 <div class="external_json error" data-url="{{json_url | secure: 'your_storage_name'}}"></div>
 <br/>
 <h2>JSON Parts:</h2>
 <div class="external_json_parts error" data-url="{{json_url | secure: 'your_storage_name'}}">
  <strong>Name:</strong>
  <span class="name">Loading...</span>
  <br />
  <strong>Age:</strong>
  <span class="age">Loading...</span>
  <br />
  <strong>Email:</strong>
  <span class="email">Loading...</span>
  <br />
  <strong>plainText:</strong>
  <span class="plainText">Loading...</span>
  <br />
 </div>
 <br/>
 <cml:smart_text  label="Editable JSON"  name="json_annotation"  task-type="qa"  review-data="{{json_url | secure: 'your_storage_name'}}"  disable-pasting="false"  rich="true"  validates="required" />
 <cml:checkbox  label="Sample Field"  name="json_check"  value="true"  validates="required" />
</div>

Advanced features:

• Full JSON data display
• Selective field display with loading states
• Smart text component for annotations
• Integrated validation and quality control
• Rich text editing capabilities

6. PDF Documents

<div class="row-fluid">
 <embed src="{{pdf_url | secure: 'your_storage_name'}}"  height="700px"  width="100%" />
</div>

Configuration options:

• Adjustable viewport size
• Built-in PDF viewer controls
• Zoom and navigation capabilities

7. HTML Content

<div class="row-fluid">
 <iframe src="{{html_url | secure: 'your_storage_name'}}"  height="700px"  width="100%" />
</div>

Security notes:

• Content is rendered in a sandboxed iframe
• Cross-origin restrictions apply
• HTML content must be properly formatted

Best Practices

1. Always use the secure filter with the appropriate storage name
2. Test your implementation with various data sizes and types
3. Implement proper error handling for failed loads
4. Consider user experience when setting dimensions and controls
5. Ensure proper access permissions are configured in your storage backend

Troubleshooting

If you encounter issues displaying your secure content:

1. Verify your storage name is correctly configured
2. Check URL formatting and encoding
3. Confirm proper access permissions
4. Inspect browser console for error messages
5. Verify content type matches the display component

Related Resources

• Secure Data Access AWS
• Secure Data Access GCP
• Secure Data Access Azure