How to remove component that is empty on dynamic page?

Ask the community
,
8

Here is the code, I tried to simplify it since I actually set this up to work with multiple tabs and switch between different elements like, Spotify, Soundcloud, Bio, Youtube etc. But this should work if you are just trying to display one element.

$w.onReady(function () {
	
	$w("#dynamicDataset").onReady( () => {
		
		//Connects dynamic item to the Dataset you pull info from, while getting the URL from the column the data nest in
		const itemUrl = $w('#dynamicDataset').getCurrentItem().spotifyPlaylistUrl;
		
		//The HTML element with an ID name of #htmlSpotify, that we are dynamically adding the src URL
		$w('#htmlSpotify').src = itemUrl;
		
		// Checks if the current item has a value in the "spotifyPlaylistUrl" field
 		var item = $w("#dynamicDataset").getCurrentItem();
		
		
		//Create an IF statement to deal with undefined (no URL), which if its true, then we collapse the HTML element  
		if (item["spotifyPlaylistUrl"] === undefined) {
 		
		// Collapses the HTML element if there is no value for "spotifyPlaylistUrl" so that there isn't an empty box taking up space and anything below this will shift upward. Plus we display a message/text to user
            	$w("#htmlSpotify").collapse();
		$w("#textNoMessage").show();
			
        	} else {
            		$w("#htmlSpotify").src = itemUrl;
            		$w("#htmlSpotify").expand();
	    		$w("#htmlSpotify").show();
	    		$w("#textNoMessage").hide();
        	}
		
	} );
});

let fadeOptions = {
  "duration":   200,
  "delay":      800
};

let fadeOutOptions = {
  "duration":   90,
  "delay":      0
};