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.

 

To get started, first create a new Custom Meta:

 

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

 

Next, inside the Item Skin Editor:

 

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

 

 

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).

 

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.

 

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.

 

 

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:

 

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:

 

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

 

Conditional Rule Applied:

 

Conditional Rule NOT Applied: