+6Hi All,
I am looking for a way to manage attachments other than on the Case Wall if such a thing exists? If not is there an elegant way to read a case for all attachments and then display them in an HTML Table with the ability to download? Having them on the case wall means they are missed once there are numerous Actions, Status Changes etc... A simple solution would be an Attachments option to pin them as with other items such as "Status Changes"
Thanks, Daryll
Best answer by f3rz
I would recommend opening a Support Case to file a Feature Request, but if this is needed now and for small files you can try below:
You can use a playbook with the view that will include an HTML widget.
1. You will need to use the Get Attachment action from the FileUtilities power-up
2. Render template from TemplateEngine power-up
3. Example of playbook
4. In the View settings HTML widget you can simply specify [TemplateEngine_Render Template_1.ScriptResult] placeholder
5. The result might look like this:
Please note that this approach won't be recommended for the large files as they might break the browser and cause slow loading of alert view.
+10
I would recommend opening a Support Case to file a Feature Request, but if this is needed now and for small files you can try below:
You can use a playbook with the view that will include an HTML widget.
1. You will need to use the Get Attachment action from the FileUtilities power-up
2. Render template from TemplateEngine power-up
3. Example of playbook
4. In the View settings HTML widget you can simply specify [TemplateEngine_Render Template_1.ScriptResult] placeholder
5. The result might look like this:
Please note that this approach won't be recommended for the large files as they might break the browser and cause slow loading of alert view.
+6I struggle a bit to make it work nice so if someone would search for that in the future. In template generator in jinja editor (html) paste this
<style>
.attachment-table {
width: 100%;
border-collapse: collapse;
font-family: 'Open Sans', sans-serif;
margin: 10px 0;
}
.attachment-table th {
background-color: #f1f3f4;
color: #202124;
text-align: left;
padding: 10px;
font-weight: 600;
border-bottom: 2px solid #dadce0;
font-size: 12px;
}
.attachment-table td {
padding: 10px;
border-bottom: 1px solid #dadce0;
font-size: 12px;
color: #3c4043;
}
.download-btn {
background-color: #1a73e8;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
font-size: 11px;
text-decoration: none;
display: inline-block;
transition: background-color 0.2s;
}
.download-btn:hover {
background-color: #1557b0;
}
</style>
<table class="attachment-table">
<thead>
<tr>
<th>Attachment Name</th>
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% if base64_blob %}
<tr>
<td><strong>{{ evidenceName }}{{ fileType }}</strong></td>
<td>{{ fileType | default('.file') | replace('.', '') | upper }}</td>
<td>
<button class="download-btn" onclick="downloadBlob('{{ base64_blob }}', '{{ evidenceName }}{{ fileType }}')">
Download
</button>
</td>
</tr>
{% elif attachments %}
{% for attachment in attachments %}
<tr>
<td><strong>{{ attachment.evidenceName }}{{ attachment.fileType }}</strong></td>
<td>{{ attachment.fileType | default('.file') | replace('.', '') | upper }}</td>
<td>
<button class="download-btn" onclick="downloadBlob('{{ attachment.base64_blob }}', '{{ attachment.evidenceName }}{{ attachment.fileType }}')">
Download
</button>
</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="3" style="text-align: center; color: #70757a;">No attachment data found in JSON.</td>
</tr>
{% endif %}
</tbody>
</table>
<script>
function downloadBlob(base64, filename) {
try {
const byteCharacters = atob(base64);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'application/octet-stream' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(link.href);
} catch (e) {
alert("Error downloading file: " + e.message);
}
}
</script>
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
