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!
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. */
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.
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.
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).
So, replace:
let url= $w('#crewDataset').getCurrentItem().url;
with
let url= $w('#crewDataset').getCurrentItem().twitch;
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.
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.
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?
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.
I'm not sure what you mean? I don't know how to do a console.log - is it just added in or?
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)?
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.
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();
}
});
});