• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Conditional Web App Layout

Explorer ,
May 03, 2012 May 03, 2012

Copy link to clipboard

Copied

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!

TOPICS
Content management and modules , Web apps

Views

2.3K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 03, 2012 May 03, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 04, 2012 May 04, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 04, 2012 May 04, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 04, 2012 May 04, 2012

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 04, 2012 May 04, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 16, 2012 Jun 16, 2012

Copy link to clipboard

Copied

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&Width=300&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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 16, 2012 Jun 16, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 16, 2012 Jun 16, 2012

Copy link to clipboard

Copied

Thanks Liam. Appreciate it!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 19, 2012 Jun 19, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 19, 2012 Jun 19, 2012

Copy link to clipboard

Copied

Liquid is coming

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 19, 2012 Jun 19, 2012

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines