Dynamic Web App Tags?

[BrianEricksonCO]

Hi all,

I've created a web app which displays a list of items linking to their own detail views, using:

<li><a href="/CustomContentRetrieve.aspx?ID={tag_itemid}"><img src="{tag_Image-Thumb_value}" width="220" alt="{tag_name_nolink}" /></a></li>

A few of the items need to link to external URLs, not detail view pages.

<a href="/CustomContentRetrieve.aspx?ID={tag_itemid}"> needs to get replaced with an external URL somehow...

Is there a way make to do this within the same web app? A checkbox perhaps?  The client needs to be able to toggle the external, non-Content retrieve item.

I'm stumped!

Thx,

Brian

[Liam Dilley]

May I ask why you are using the nasty looking custom retrieve URL and not one of the web app URL tags?

You have no conditions yet, so if you want a url to change you need a tick box to use as a class that changes per item and a hidden maybe HTML5 data attribute if your using that doctype for example and javascript to detect which link is needed to use and for that web app item replace the href of the link with the external one which comes from a text string custom field.

[BrianEricksonCO]

I found the custom retrieve URL in BC documentation.  Is there a better tag for linking to the web app detail view?

I am using HTML5, but am not savvy enough to know how to use a checkbox to toggle which URL gets used (detail view versus external). Kiyuco had a tutorial showing how a checkbox can append a 0 or 1 to items, but I don't know how any of this should be written in the web app or javascript.  If anyone wants to spell that out, I'd be grateful.

[Liam Dilley]

Must have been the old knowldgebase not the new one. You will always run into issues if you do that.
http://forums.adobe.com/community/business_catalyst - Overview page of these very forums, you looked on the right?

http://helpx.adobe.com/business-catalyst/kb/tags---quick-reference.html

Go to web apps, what do you see ?

You have a checkbox option that says "link to external url" and then have custom field (not mandatory) as a text so you can copy and paste an external link in.

On the li of the layout you add a class of something like isExternal{tag_external url tag name here}

You then add the HTML5 attribute data which can be used to specify any data name you want so the li would form something like:

<li class="isExternal{TAG OR CHECKBOX HERE} data-extlink="{TAG FOR TEXT FIELD FOR URL}">

Then in say jquery you run a loop (.each() ) on the LI.

If it has isExternal1 (true) and data-extlink is not empty ( .hasClass() & .attr() ) Then you can say something like..

// Store the value:
var extLinkVal = $(this).attr(data-extlink);

$('a',this) OR  $(this).find("a") (both work)

so..

$('a',this).attr('href',  extLinkVal);

And your sorted.

[BrianEricksonCO]

Wow, Liam, that was very helpful - thank you. I changed /CustomContentRetrieve.aspx?ID={tag_itemid} to {tag_itemurl_withhost} - better

My only remaining question is how to form the jQuery javascript, I'm just learning.

My field names are: {tag_External-URL-Checkbox} and {tag_External-URL}, how would I write a functioning script call?

So this is now my li:

<li class="isExternal{tag_External-URL-Checkbox} data-extlink="{tag_External-URL}"><a href="{tag_itemurl_withhost}"><img width="220" alt="{tag_name_nolink}" src="{tag_Image-Thumb_value}" /></a></li>

Should the script look something like this (I realize this has errors - need help understanding):

<script type="text/javascript">

$(document).ready(function() {

( .hasClass(".isExternal") & .attr('1') )

var extLinkVal = $(this).attr(data-extlink);

$('a',this).attr('href',  extLinkVal);

</script>

Doesn't the checkbox append a '1' or '0' to the class?

Thanks for your generosity and time on this.

[BrianEricksonCO]

Er, wait, the attr should be 'href' ? I'm not sure where the checkbox value factors in.

<script type="text/javascript">

$(document).ready(function() {

( .hasClass(".isExternal") & .attr('href') )

var extLinkVal = $(this).attr(data-extlink);

$('a',this).attr('href',  extLinkVal);

</script>

[Liam Dilley]

How do you know when to triger it?

Is it internal or external - That is your check box.

If that tag = External

Then do xxxx ( run your code )

else that tag will be Internal

Then Do xxxx or nothing.

You will see a lot of people posting jQuery that blindly runs no matter what - very poor on perfomance and also will error because if the element does not exist on the page then it will produce a null and error in a lot of cases.
See a lot of people running complex code even when the page is not on, so things look, try to run and dont when you should not run them at all ^^

[BrianEricksonCO]

Right, I agree and understand the concept of internal vs external if/then logic. My problem is that I'm not savvy enough to write the script to do this. If someone is willing to help, I'd be grateful. If that seems like a poor substitute for hours of digging through javascript "how to's", I understand.  Learning is great and StackOverflow might need to help me, but I'm sure others could learn from an example of how to actually write the script. I'm not sure how to piece together final script despite the fact that the concepts you mentioned make sense to me in themselves.

In the meantime, I'll hit some JQuery/Javascript documentation.

Thank you, I really do appreciate the insights which have me heading down the right path.

[Liam Dilley]

That was insite but to what you doing you will still need to do the if to say if this then run your script to do what you need.

First step is to learn to do a function, you can do this inline as you do for now but you wrap your functionality in a function...

function myThing() {

// Do your stuff

}

Then you call it when you need it
If( element exists or time to run this ) { myThing() }

Then you can move on to objects and more

[BrianEricksonCO · Accepted solution]

Got it!

<script type="text/javascript">

$(document).ready(function(){

    if ($('.Link-to-External-URLYes').attr('data-extlink')) {

        $('.Link-to-External-URLYes > a').attr('href', $('.Link-to-External-URLYes').attr('data-extlink'));

    }

});

</script>

[BrianEricksonCO]

The only problem I'm having is that my script isn't specific to the individual LIs, it is taking the value from the first instance of 'data-extlink' and applying it to all LIs w/an external link.

How do I target this LI? Thoughts?