Jump to content

Hide and/or Show Document Icons


Recommended Posts

Contained in this HTML block are two options:

Google Doc<br />
&nbsp; &nbsp;<a href="[@field:Employee_Document_Link]" target="_blank"><img alt="File Quick View" src="http://account-ability.net/webapps/hca/images/Entypo_e731(1)_32.png" style="width: 32px; height: 32px;" /></a><br />

<br />

Uploaded Doc<br />
&nbsp; &nbsp; <a href="https://c0axa147.caspio.com/dp/76292000e18ad3e841834930b209?Employee_Document_ID=[@field:Employee_Document_ID]" target="_blank"><img alt="File Quick View" src="http://account-ability.net/webapps/hca/images/Entypo_e731(1)_32.png" style="width: 32px; height: 32px;" /></a>

The user clicks on either of the document icons. What I am trying to achieve is for the "Google Doc" icon to show only when the [@field:Employee_Document_Link] is not empty the and "Uploaded Doc" icon to only show when the [@field:Employee_Document_Upload] is not empty. Would very much appreciate any help in this.

Link to comment
Share on other sites

Hello @Accountability,

 

Assuming that you have a Report DataPage, just paste the snippet provided on an HTML Block with HTML Editor disabled in the Advanced Tab. (Important).

If it is a Details DataPage just remove all occurences of -[@cbRecordIndex#], else, just paste as is. (Be sure to keep a backup before saving).

<div id="googledoc-[@cbRecordIndex#]">
  Google Doc <br />
  <a href="[@field:Employee_Document_Link]" target="_blank">
    <img alt="File Quick View" src="http://account-ability.net/webapps/hca/images/Entypo_e731(1)_32.png" style="width: 32px; height: 32px;" />
  </a>
<div>

<br />
<br />

<div id="uploadeddoc-[@cbRecordIndex#]">
Uploaded Doc <br />
<a href="https://c0axa147.caspio.com/dp/76292000e18ad3e841834930b209?Employee_Document_ID=[@field:Employee_Document_ID]" target="_blank">
  <img alt="File Quick View" src="http://account-ability.net/webapps/hca/images/Entypo_e731(1)_32.png" style="width: 32px; height: 32px;" />
</a>
<div>
  
<script>
  var googledoc = document.getElementById('googledoc-[@cbRecordIndex#]');
  var uploaddeddoc = document.getElementById('uploadeddoc-[@cbRecordIndex#]');
  
  if (![@field:Employee_Document_Link]) googledoc.style.display = "none";
  if (![@field:Employee_Document_Upload]) uploaddeddoc.style.display = "none";
  
</script>

 

What I did was, I just modified your whole HTML block. Wrapped the two links on separate div tags, then wrote a script that hides the link if the condition field is blank/empty.

Hope this works and helps.

 

Regards,

DN31337

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...