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!
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.
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.
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.
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>
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();
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
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()
Copy link to clipboard
Copied
Thanks Liam. Appreciate it!
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.
Copy link to clipboard
Copied
Liquid is coming
Copy link to clipboard
Copied
...when? Soon? Before the end of the year-ish?