Skip navigation
Currently Being Moderated

Conditional Web App Layout

May 3, 2012 10:55 AM

Tags: #conditional_build_tags #conditional_statement #web_apps

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!

 
Replies
  • Liam Dilley
    6,694 posts
    Feb 28, 2012
    Currently Being Moderated
    May 3, 2012 12:18 PM   in reply to rossbb

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 4, 2012 12:19 AM   in reply to rossbb

    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.

     
    |
    Mark as:
  • Liam Dilley
    6,694 posts
    Feb 28, 2012
    Currently Being Moderated
    May 4, 2012 2:15 AM   in reply to Gary Swanepoel | ITB

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 4, 2012 5:00 PM   in reply to Liam Dilley

    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>

     
    |
    Mark as:
  • Liam Dilley
    6,694 posts
    Feb 28, 2012
    Currently Being Moderated
    May 4, 2012 5:15 PM   in reply to Gary Swanepoel | ITB

    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();
    

     

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2012 5:25 PM   in reply to Liam Dilley

    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

     
    |
    Mark as:
  • Liam Dilley
    6,694 posts
    Feb 28, 2012
    Currently Being Moderated
    Jun 16, 2012 5:59 PM   in reply to EM-99

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 16, 2012 8:36 PM   in reply to Liam Dilley

    Thanks Liam. Appreciate it!

     
    |
    Mark as:
  • Liam Dilley
    6,694 posts
    Feb 28, 2012
    Currently Being Moderated
    Jun 19, 2012 1:01 PM   in reply to rossbb

    Liquid is coming

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2012 3:40 PM   in reply to Liam Dilley

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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points