Jump to content

Conditionally Hide Fields In Calendar Datapage


Recommended Posts

I've looked through a few of the different 'Hide a Field' posts in here, but I couldn't get them to work on my Calendar Datapage. 

I have an HTML block on my Calendar section records. Depending on what the calculated field value is, I want to either hide or show the 'Join' button. If calcfield1 = 'ASSISTANT SCHEDULED', I want the Join button to be hidden. Otherwise, if it is 'HELP REQUESTED', I want to show it. 

I don't get any errors. I just can't get anything to hide. 

<a id="joinIn" href="#">Join</a>
<p id="joinIn2">[@calcfield:1]</p>

<script>
document.addEventListener('DataPageReady', function showMe() {
    var e = document.getElementById("joinIn");
    var field1 = document.getElementById("joinIn2");

    if(field1 == "ASSISTANT SCHEDULED") {
        e.style.display = "none !important";
        field1.style.display = "none !important";
    } 
});
</script>

calcfieldhide.thumb.PNG.c65839767c71e2137e57da8266fbfe97.PNG

Link to comment
Share on other sites

49 minutes ago, kpcollier said:

I've looked through a few of the different 'Hide a Field' posts in here, but I couldn't get them to work on my Calendar Datapage. 

I have an HTML block on my Calendar section records. Depending on what the calculated field value is, I want to either hide or show the 'Join' button. If calcfield1 = 'ASSISTANT SCHEDULED', I want the Join button to be hidden. Otherwise, if it is 'HELP REQUESTED', I want to show it. 

I don't get any errors. I just can't get anything to hide. 

<a id="joinIn" href="#">Join</a>
<p id="joinIn2">[@calcfield:1]</p>

<script>
document.addEventListener('DataPageReady', function showMe() {
    var e = document.getElementById("joinIn");
    var field1 = document.getElementById("joinIn2");

    if(field1 == "ASSISTANT SCHEDULED") {
        e.style.display = "none !important";
        field1.style.display = "none !important";
    } 
});
</script>

calcfieldhide.thumb.PNG.c65839767c71e2137e57da8266fbfe97.PNG

you're lacking innerhtml field1.innerHTML == "ASSISTANT SCHEDULED"

if innerHTML does not work try innerText

Link to comment
Share on other sites

5 minutes ago, TellMeWhy said:

if innerHTML does not work try innerText

Thanks for the reply. I gave both a try and the problem persists.

document.addEventListener('DataPageReady', function showMe() {
    var e = document.getElementById("joinIn");
    var field1 = document.getElementById("joinIn2");

    if(field1.innerHTML == "ASSISTANT SCHEDULED") {
        e.style.display = "none !important";
        field1.style.display = "none !important";
    } 
});

 

Link to comment
Share on other sites

1 hour ago, kpcollier said:

Thanks for the reply. I gave both a try and the problem persists.

document.addEventListener('DataPageReady', function showMe() {
    var e = document.getElementById("joinIn");
    var field1 = document.getElementById("joinIn2");

    if(field1.innerHTML == "ASSISTANT SCHEDULED") {
        e.style.display = "none !important";
        field1.style.display = "none !important";
    } 
});

 

Ah, it's Calendar, so it should work the same as this https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/

 

You need to use a unique field for the ID, just append different text for different elements

Here's an example:

image.png.7631d6ce7ac43a02e8876e8db65065d8.png

 

image.thumb.png.916cdd2f6d26572b6a87a4e203233a3a.png

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...