How to remove component that is empty on dynamic page?

Ask the community
,
12

Not sure if you saw my code in Charles K. thread. But have you tried this:

$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
};