Show/Hide skin content based on conditional rules

Let’s say you have a grid with a skin that contains a lightbox button as well as a link button. And you only want to show the link button for certain grid items, while hiding it for others. This can be accomplished with “Advanced Show/Hide” rules.

For this example, we’ll use a simple skin as shown in the following screenshot. And we’ll hide the link button based on an Advanced conditional rule.

skin-conditional

 

To get started, first create a new Custom Meta:

meta_data_handling

meta-add-new

 

When creating the Custom Meta, set the “Type” to “Text” as shown in the following screenshot:
show-hide-meta

meta-created

 

Next, inside the Item Skin Editor:
edit-skin-button

 

Click the element you wish to apply a “Show/Hide” conditional to, and then click the “Advanced Rules” button:
setup-advanced-rule

 

Quick Tip:
A “condition” in programming terms means “If something exists”, or “If something does not exist”, or “If something equals”, etc.

 

For this example, well set the “Show/Hide if rules are true” option to “Show”. So our link button will only be shown when the conditional rule is met. But it could also be the opposite if set to “Hide” (element would only hide if conditional rule is met).
select-meta-conditional

 

From the “Type” dropdown shown in the screenshot above, you’ll see several options that can be chosen. For our example, we’re setting a “Meta” based conditional rule. But as you can see from the dropdown list above, conditional rules could also be applied based on whether other built-in data is present or not. For example, if “SoundCloud” were chosen, the element would be shown/hidden based on whether the grid item contained a SoundCloud song or not.

 

Because we’re setting up a meta-based conditional rule for our example, choose “Meta” for the “Type”. Then select and/or type-in the meta handle for the custom meta (for the meta data we previously created in this example, the meta handle is “eg-show-element”).

Next for the “Operator” dropdown, select “==”, and for the “Value”, type the word “yes”.

So based on this conditional rule, if our “Show Element” custom meta equals “yes”, the skin element will be shown 🙂

Finally, click the “Save Rules” button at the bottom to officially save the new conditional rule.

save-rule

 

The next step is to apply a value to the custom meta that’s being used in our conditional rule.

If you’re using a post-based grid, visit one of your posts, and in the “Essential Grid Custom Settings” section, under “Custom Meta”, you’ll see our new “Show Element” meta option. Enter the word “yes” (the same text that we used for the “Value” in our conditional rule) if you want the link button to show up for this grid item. Or enter the word “no” if you do not want the link button to be shown.

Quick Tip:
Because we’ve used “==” as the conditional rule’s operator, technically you can just leave the “Show Element” meta value field blank, and that would be the same as entering the word “no”.

 

conditional-enter-meta

 

If you aren’t using a post-based grid, and instead are using a Custom Grid, visit the grid’s main admin, and in the grid’s preview, select “Edit Element” for one of the items:

edit-element

 

Then in the “Custom Meta” section, enter “yes” for the “Show Element” field (or “no”, depending on whether you want to show or hide the link button for this particular item), then click the “Save Changes” button:

custom-edit-meta

 

Finally, save and refresh the grid, and you’ll see the conditional rule in action.

 

Conditional Rule Applied:

conditional-applied

 

Conditional Rule NOT Applied:

conditional-not-applied