11 Replies Latest reply on May 4, 2016 4:55 AM by Daniel Nicholls

    Hiding an empty web app field

    Daniel Nicholls Level 1

      Is it possible to hide a web app field if there is no data for it, WITHOUT resorting to tables?

        • 1. Re: Hiding an empty web app field
          Robert K. Bell Level 4

          This is where you'd use Liquid Markup logic operators:

           

              {% if yourWebappField and yourWebappField != '' -%}
                  <div>
                      The thing: {{ yourWebappField }}
                  </div>
              {% endif -%}
          • 3. Re: Hiding an empty web app field
            Daniel Nicholls Level 1

            Thanks for this, Robert.

             

            Not sure why you added ' and yourWebappField '. Is this necessary? I got away with using the web app field just the once, and also had to put 'youWebappField' inside {{}} for it to work.

            • 4. Re: Hiding an empty web app field
              Daniel Nicholls Level 1

              So just to make it clear, this is what I did:

               

                  {% if {{ image1 }}!= '' -%}
                      <li class="scarf-tie-content">
                          <img src="{{ image1 }}"><p><span>Step 1</span>{{ instructions1 }}</p>
                      </li>
                  {% endif -%}

              • 5. Re: Hiding an empty web app field
                Robert K. Bell Level 4

                Using the double curly tags ("Output markup") inside the curly-percent tags ("Tag markup") doesn't work the way you might expect. The Output markup will be replaced by its string representation before the outer Tag markup is evaluated.

                That is, depending on the value of image1, the if statement might look like...

                 

                    {% if /example image.jpg != '' -%}
                    (missing quote marks, special characters in value)

                 

                    {% if  != '' -%}
                    (empty string)

                 

                    {% if {{image1}} != '' -%}
                    (null value, `image1` doesn't get replaced)

                 

                These result in invalid syntax.

                 


                The if x and x != '' may look redundant, but it's designed to catch both null and '' values. It's necessary because empty strings evaluate as true in Liquid Markup.

                • 6. Re: Hiding an empty web app field
                  Liam Dilley Adobe Community Professional & MVP

                  That really does not help a beginner and not actually that accurate in the render output for custom fields Robert.

                   

                  @Daniel - Just do not do braces in your if, You already in a liquid conditional and you do not need to force another rendering request.

                  {% if image1 != '' -%}

                      <li class="scarf-tie-content">

                          <img src="{{image1}}"><p><span>Step 1</span>{{instructions1}}</p>

                      </li>

                  {% endif -%}

                  Will be fine for you, if your field name has spaces:

                  {% if this.['image 1'] != '' -%}

                      <li class="scarf-tie-content">

                          <img src="{{image1}}"><p><span>Step 1</span>{{instructions1}}</p>

                      </li>

                  {% endif -%}

                   

                  Hope that helps

                  1 person found this helpful
                  • 7. Re: Hiding an empty web app field
                    Daniel Nicholls Level 1

                    That's really helpful, guys, thanks.

                     

                    And thanks for simplifying this for me, Liam.

                     

                    As a matter of interest, I assume sticking in unnecessary braces, hence forcing more rendering requests, would slow things down, and is therefore bad practice. Is that right?

                    • 8. Re: Hiding an empty web app field
                      Liam Dilley Adobe Community Professional & MVP

                      Average person may not notice on the page load, but its more getting habit of avoiding it. May not notice for this one case, but then do it for the next thing, and next thing etc and it adds up.

                      1 person found this helpful
                      • 9. Re: Hiding an empty web app field
                        Daniel Nicholls Level 1

                        Further to this:

                        Rather than repeating the same if statement for each image field line of code, how would I implement a for loop to count the fields (from 1 to 10).

                        So, rather than:

                            {% if this.["portfolio image 1"] != '' -%}<li><img alt="" src="{{this.["portfolio image 1"]}}" /></li>{% endif -%}

                            {% if this.["portfolio image 2"] != '' -%}<li><img alt="" src="{{this.["portfolio image 2"]}}" /></li>{% endif -%}

                            {% if this.["portfolio image 3"] != '' -%}<li><img alt="" src="{{this.["portfolio image 3"]}}" /></li>{% endif -%}

                            {% if this.["portfolio image 4"] != '' -%}<li><img alt="" src="{{this.["portfolio image 4"]}}" /></li>{% endif -%}

                            {% if this.["portfolio image 5"] != '' -%}<li><img alt="" src="{{this.["portfolio image 5"]}}" /></li>{% endif -%}

                            {% if this.["portfolio image 6"] != '' -%}<li><img alt="" src="{{this.["portfolio image 6"]}}" /></li>{% endif -%}

                            {% if this.["portfolio image 7"] != '' -%}<li><img alt="" src="{{this.["portfolio image 7"]}}" /></li>{% endif -%}

                            {% if this.["portfolio image 8"] != '' -%}<li><img alt="" src="{{this.["portfolio image 8"]}}" /></li>{% endif -%}

                            {% if this.["portfolio image 9"] != '' -%}<li><img alt="" src="{{this.["portfolio image 9"]}}" /></li>{% endif -%}

                            {% if this.["portfolio image 10"] != '' -%}<li><img alt="" src="{{this.["portfolio image 10"]}}" /></li>{% endif -%}

                         

                        If possible, how would I implement a count that would just require one line of the if statement.

                        • 10. Re: Hiding an empty web app field
                          Robert K. Bell Level 4

                          Try this:

                           

                              {% for n in (1..10) -%}
                                  {% assign key = "portfolio image " | append: n -%}
                                  {% if this[key] != '' -%}<li><img alt="" src="{{ this[key] }}" /></li>{% endif -%}
                              {% endfor -%}
                          1 person found this helpful
                          • 11. Re: Hiding an empty web app field
                            Daniel Nicholls Level 1

                            Neat. Works perfectly.

                             

                            Thanks, Robert.