Hi there!
We’re trying to create a database of information for our members profiles that includes links to their various social media etc. We want to be able to use icons on the dynamic page that are linked to their social media url links in the database for each member. Not every member has a link for each section (ie some use Instagram,Twitter, etc, while others do not), and that is where the problem is.
Because the images are static, when there is no link, the images stay but are not linked to anything. We want to be able to hide these “broken” links so the actual links are represented and to “shrink up” the icon list so there are no random gaps where images are now removed.
We don’t know much about javascript at all, so when you make suggestions, example code is extremely useful!
- The dataset is called #crewDataset on the sheet
- The database is caled CrewMembers
- The social links are url sections in the database, named by their platform (ie “Twitch”)
- The images are just inserted on a strip (and we’re pretty sure this won’t work for what we need)
This is the current code we’ve managed to get to. However, all it managed to do was hide the icon on all pages.
$w.onReady(function () {
$w('#crewDataset').onReady( () => {
let item = $w('#crewDataset').getCurrentItem();
if (item.url === '*') {
$w('#twitchicon').show();
$w('#twitchicon').expand();
} else {
$w('#twitchicon').collapse();
$w('#twitchicon').hide();
}
});
});
We’ve also tried this, however there is an error on line 3 where the “link” portion is undefined.
$w.onReady(function () {
$w('#crewDataset').onReady( () => {
let url = $w('#crewDataset').link;
if (url.link === '*') {
$w('#twitchicon').show();
$w('#twitchicon').expand();
} else {
$w('#twitchicon').collapse();
$w('#twitchicon').hide();
}
});
});
Thanks in advance for the help!
Try this:
$w.onReady(function () {
$w(‘#crewDataset’).onReady( () => {
let url= $w(‘#crewDataset’).getCurrentItem().url;
if (url) {
$w(‘#twitchicon’).show();
$w(‘#twitchicon’).expand();
} else {
$w(‘#twitchicon’).collapse();
$w(‘#twitchicon’).hide();
}
});
});
Hi Giri, we just made that change, and unfortunately it didn’t work. The image was hidden on all pages still, even those linked to pages with a url.
If you do a console.log for the url and one inside the “if(url)”, what does it display? Is there a URL in the var (the first console.log)?
I’m not sure what you mean? I don’t know how to do a console.log - is it just added in or?
console.log simply displays text and the content of vars in a window (that bottom part where you type your code in), but in this case in Preview mode, or in the browser´s console in Publish mode. It allows you to test if all goes well. Do this:
$w.onReady(function () {
$w(’ #crewDataset ‘).onReady( () => {
let url= $w(’ #crewDataset ‘).getCurrentItem().url;
console.log(“url=” + url);
if (url) {
console.log(“inside if = true”);
$w(’ #twitchicon ‘).show();
$w(’ #twitchicon ‘).expand();
} else {
$w(’ #twitchicon ‘).collapse();
$w(’ #twitchicon ').hide();
}
});
})
If you run this, in the console window you will see the value of the var url for each item and if it goes inside the If (true) part of the statement.
Okay, added in the new lines and hit the preview button. This is what is in the Developer Console:
Loading the code for the site. To debug this code, open masterPage.js in Developer Tools.
Loading the code for the CrewMembers (Member Name) page. To debug this code, open g6jkz.js in Developer Tools.
url=undefined
Only the “url=undefined” is new compared to before without the console.log lines added.
So, from that I understand that its not properly linking to the database?
If it is undefined, and you expect a string ( a url), the logic actually works. There is no url, thus it does not go into the if-statement. You should double-check why you get no url (and yes, prob. in your db, naming (everybody confuses the column label and the real field name in the beginning), etc.
Bah this is so confusing!
Okay - well the database’s name is CrewMembers, and it shows like this linked on the page:
This is how the twitch field looks in the actual database (all the other social links are set up similarly):
And this is how the images are currently set up:
I really am at a loss as to where the disconnect is.
So, replace:
let url= $w(’ #crewDataset ').getCurrentItem().url;
with
let url= $w(’ #crewDataset ').getCurrentItem().twitch;
That fixed it! Now, all we’d have to do is duplicate that portion of code and switch “twitch” out with the various other links right?
Also, do you have any suggestions on how to make the image list compact down on itself? The way the images are now, there will just be gaps when images are missing, which will look horrible for some of our members (they’re not the social types).
Hello CreatiCrew and Giri, do either of you have a solution for collapsing images (more than one) when the data field is empty? I am trying all difference code variations i am finding in these forums but i can’t get it to work for my site.
My site is made up of mostly dynamic pages.
what i am finding is it will collapse 1 image but for everyone. and still leave a space on the page. other attempts hid all images on every page.
please help
Not sure, but you might have ran into the 70/20 rule. It is now documented in the API. Look under collapse. Basically, it will leave a white space if the bordering elements are not within a certain amount of pixels of the collapsed one.
1 Like
Thank you i adjusted my elements to be within 70px of each other. still a spacce 
also my code now is either hiding my image on every page or displaying it on each page based on the varations below.
can you help me fix this?
$w.onReady( function () {
$w(‘#dataset1’).onReady( () => {
let image= $w(‘#dataset1’).getCurrentItem().image;
if (image) {
$w(‘#promo2’).show();
$w(‘#promo2’).expand();
} else {
$w(‘#promo2’).collapse();
$w(‘#promo2’).hide();
}
});
});
this hides it on every page
$w.onReady( function () {
$w(‘#dataset1’).onReady( () => {
let image= $w(‘#dataset1’).getCurrentItem().promo2;
if (image) {
$w(‘#promo2’).show();
$w(‘#promo2’).expand();
} else {
$w(‘#promo2’).collapse();
$w(‘#promo2’).hide();
}
});
});
this shows it on every page
@marketing-1
Hi,
Can you please share a link to your site and specify the name of the page so we can inspect it?
Roi.
@roi-bendet
Hello Roi, are you available for instant chat feature? I am messaging you now. If not i can send you the link (its a semi-private site for clients information only) privately.
I also need to help doing the same collapse and hide if no url is present for a button.
Hello Community! Has anyone gotten this code to work? Actually work not back and forth with fixes that doesn’t work? Please help. It should be semi easy to do. I know i am a novice at coding but the samples and code offered should work for their purpose provided.
@roi-bendet can you help me with code? i need to hide a button and it isn’t working for me
$w.onReady( function () {
$w(‘#dataset1’).onReady( () => {
let url= $w(‘#dataset1’).getCurrentItem().cafeonline;
console.log(“url=” + url);
if (url) {
console.log(“inside if = true”);
$w(‘#button51’).show();
$w(‘#button51’).expand();
} else {
$w(‘#button51’).collapse();
$w(‘#button51’).hide();
}
});
})
hides the button on all pages and in preview mode url is coming back as undefined
Hello Giri,
can you help me with code? i need to hide a button and it isn’t working for me
$w.onReady( function () { $w(’ #dataset1 ‘).onReady( () => { let url= $w(’ #dataset1 ‘).getCurrentItem().cafeonline; console.log(“url=” + url); if (url) { console.log(“inside if = true”); $w(’ #button51 ‘).show(); $w(’ #button51 ‘).expand(); } else { $w(’ #button51 ‘).collapse(); $w(’ #button51 ').hide(); } }); })
hides the button on all pages and in preview mode url is coming back as undefined
This works but my problem is that I’m trying to process the page that lists all data records in the dataset; I would think currentItem would trigger with each iteration as items are added to the page, however, it only triggers on the first item so all of my logic is tied to the first record. Makes zero sense to me.
$w('#dynamicDataset').onReady( () => {
let item = $w('#dynamicDataset').getCurrentItem();
/* what can I use to get a hook to the item as it's being inserted to the page so that I can insert logic to modify it? My use case is almost exactly the same as this post where I have images that link to website and social media profiles but only if those fields are populated for a given record. Currently, the images show no matter if the link is populated or not; if there is no link the images are just not linked. */
