11 Replies Latest reply: Jun 19, 2012 3:40 PM by kenneth_rapp RSS

    Conditional Web App Layout

    rossbb Community Member

      Whats the best way to set up a conditional web app layout?

       

      I want to run and "If/Else" function against fields in the web app.

       

      If this field has data, display this code, else use this code...

       

      Will BC allow straight .Net tags?

       

      Suggestions?

       

      Thanks!

        • 1. Re: Conditional Web App Layout
          Liam Dilley MVP

          Hi Ross ,

          You can not run any .net code on this system.

          Currently you have to use CSS and JavaScript to do conditional elements.

          BC Is working on another coding layer called liquid which has conditional statements and more but that is a little way off still and may not launch with web app functionality for that until later.

          • 2. Re: Conditional Web App Layout
            Gary Swanepoel - ITB Community Member

            Hi RossBB,

             

            It really depends on what you are trying to do as there are a few ways to do this.

             

            You could use inline JS for the webapp list view if you wanted to use conditional statements like below.

             

            .. <script>if ("{tag_webAppItemFieldName}" != "aString") document.write("the new stuff that needs to go in");</script> ...

             

            But I would kinda advise against this for a silly amount of reasons.

             

            Depending on what you need it for I'd recommend seperating this out and using the webapp field for something like a class or id and then use css (or JS) to control element outside of the webapp. You'd have to control the input from the webapp but again, this will depend on your situation.

             

            ..

            <style>

                 .{tag_webAppItemFieldName} {

                      /* display some really cool styling */

                 }

            <style>

            <script>

                 jQuery{".{tag_webAppItemFieldName}"){

                       /* Do some really clever scripting */

                 }

            <script>

            ..

            <div class="{tag_webAppItemFieldName}">Content</div>

            ..

             

             

            At the end of the day you're just replacing a string so if you can think outside of the box with that, you can actually achieve quite a lot.

             

             

            Hope this helps.

            • 3. Re: Conditional Web App Layout
              Liam Dilley MVP

              You do not need JavaScript to do that.

              If you have a field that could be either or you can have an extra custom fields which is a bollean for that item. You can add add that as a parent class and I'd one or the other you know to show or hide content.

               

              In terms of JavaScript I'm not a fan of inline and jquery is king.

               

              You can do things like :isempty for example or .text() == "" for example.

               

              Gary, I think you must have forgot to add something like that in your code because the jquery solution would do nothing there.

              • 4. Re: Conditional Web App Layout
                Gary Swanepoel - ITB Community Member

                You're right Liam, you don't need JS but it's an example of breaking up the layers.

                 

                Since I didn't have an example to work with my code was quite rough on the semantics, but if you're already familiar with jQuery you'd get the idea. The point was using the webapp item as the selector. This would be my preferred option to inline styling.

                 

                See updated.

                 

                <script>

                     jQuery(".{tag_webAppItemFieldName}").jQueryAction(function(){

                           /* Do some extra really clever scripting */

                     });

                <script>

                • 5. Re: Conditional Web App Layout
                  Liam Dilley MVP

                  Hey Gary,

                  You got to post actual working code for people here, People take code as litterally even if it is sudo because they do not know it. And then post "It not working". Just from experience

                  All you need to do to clean up an empty element if you was to do it in jQuery is..

                   

                  $(".element:isempty").remove();
                  

                   

                   

                  • 6. Re: Conditional Web App Layout
                    EM-99

                    Hey Liam,

                    I may just perhaps be one of those people

                    Just wondering if you can help.

                    I’m building a web app (that customers can edit) that will display on the website.

                    Here’s the detail code so far

                    <div id="ms-detail-item-wrap">

                        <h1>{tag_name}</h1>

                        <div id="ms-detail-image">

                          <img class="right" src="{tag_large image_value}?Action=thumbnail&amp;Width=300&amp;Height=300" alt="{tag_business name_nolink}" />

                        </div>

                        <div id="ms-detail-description">

                          <p>{tag_description}</p>

                        </div>

                        <div id="ms-detail-content">

                          <dl>

                    <dt>Address:</dt><dd>{tag_address}</dd>

                    <dt>Phone:</dt><dd>{tag_phone}</dd>

                    <dt>Fax:</dt><dd>{tag_fax}</dd>

                    <dt>Email:</dt><dd><a href="mailto:{tag_email}">{tag_email}</a></dd>

                    <dt>Website:</dt><dd><a href="http://{tag_website}" target="_blank">{tag_website}</a></dd>

                          </dl>  

                        </div>

                    <div class="clr"></div>

                    <p class="back"><a class="back-a" href="javascript: history.go(-1)">Go Back</a></p>

                      </div>

                     

                    And say if a customer does not have a fax number I don’t want that line to appear at all.

                    Currently it just says

                    FAX:

                    With nothing there. I want that whole line (including the name FAX:) to disappear/be hidden so whatever is under it moves up a line.

                    Do you have a suggestion on the best way to go about this?

                     

                    Cheers

                    • 7. Re: Conditional Web App Layout
                      Liam Dilley MVP

                      Add an I'd to the faxes element so you can target it.

                      I jQuery you can run the isempty ability of jquery to see if the dd is empty or not and if it is the parent element Witt he I'd you can either .remove or Hide with .hide()

                      • 8. Re: Conditional Web App Layout
                        EM-99 Community Member

                        Thanks Liam. Appreciate it!

                        • 9. Re: Conditional Web App Layout
                          rossbb Community Member

                          Thanks for all the feedback folks! I really with we could have conditional iterative fields within the system! oh well.

                          • 10. Re: Conditional Web App Layout
                            Liam Dilley MVP

                            Liquid is coming

                            • 11. Re: Conditional Web App Layout
                              kenneth_rapp Community Member

                              ...when? Soon? Before the end of the year-ish?