Conditionally Display An Element Based on Metadata

Article author
Duncan Hamra
  • Updated

Custom Fields

💡 This approach works most reliably with checkboxes, select, fields, and radio buttons since they are true, false, or some other pre-determined value. 

// paste in body of global site scripts
function conditionallyRenderElement({ key, value, id }) {
	let element = document.getElementById(id)
	element.style.display = key.includes(value) ?  "block" : "none";
}

window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
	if (member && member.customFields) {
		let key member.customFields["your custom field id"] // EDIT THIS
		// the value of the custom field you want to check for
		let value = "true" // EDIT THIS
		// id of the element you want to show or hide conditionally 
		let id = "conditional_wrapper" // EDIT THIS
		conditionallyRenderElement({ key, value, id })
	}
});

Usage:

Replace the bolded placeholder entries for key, value and id inside of the getCurrentMember method.

  • Key: The id of the custom field you want to check for.
  • Value: The text value that the custom field should equal
  • Id: The ID of the element that you want to conditionally show or hide

Member Metadata

💡 This approach works best with metadata items that have boolean (true or false) values.

// paste in body of global site scripts
function conditionallyRenderElement({ key, value, id }) {
	let element = document.getElementById(id)
	element.style.display = key.includes(value) ?  "block" : "none";
}

window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
	if (member && member.metaData) { 
		// the specific metadata key/id you want to inspect
		let key = member.metaData["completed"] // EDIT THIS
		// the value of the metadata you want to check for
		let value = "true" // EDIT THIS
		// id of element to show or hide conditionally 
		let id = "conditional_wrapper" // EDIT THIS
		conditionallyRenderElement({ key, value, id })
	}
});

Usage:

Replace the bolded placeholder entries for key, value and id inside of the getCurrentMember method.

  • Key: The id/key for the metadata you want to check for.
  • Value: The text value that the metadata key should equal
  • Id: The ID of the element that you want to conditionally show or hide

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.