I am trying to loop article categories and provide an icon image for each of categories depending on its title in Salesforce Apex. I don't want to hard code each static resource name. My idea is to create a string variable for each loop iteration and refer to matching static resource name by this variable value. So I had a look at the doc on this matter, and it doesn't seem to work the way it's expected.
<knowledge:categoryList categoryVar="category" categoryGroup="Help" rootCategory="Using_{!selectedCategory}" level="1">
<apex:variable var="iconSource" value="pkb_{!selectedCategory}_{!category.name}" />
<a href="#" class="item">
<div class="box-title">
<h3>{!category.label}</h3>
</div>
<apex:image value="{!$Resource[iconSource]}" />
</a>
</knowledge:categoryList>
Any thoughts how it's usually done?
If you have Static resource with inner structure like:
/js/...
/css/...
/img/...
You can access to static resource items using such construction:
{!URLFOR($Resource.resourceName, 'img/imageName.jpg')}
So, for apex:image tag it will look like:
<apex:image url="{!URLFOR($Resource.resourceName, 'img/imageName.jpg')}" width="50" height="50"/>
Related
I am relatively new to angularJs so I am trying to learn how to do different things. I have been trying to make solutionName act as a p tag if there is no URL input for solutionUrl1, at the moment solutionName is acting as if it is hyperlinked even when its not. Any help would be appreciated.
<a ng-href="{{::data.solutionUrl1}}" class="card__title" style="text-align: center">
<span>{{::data.solutionName}}</span>
</a>
Use ng-if of angularjs to render either one or the other:
Something like this, you most probably have to change the condition to meet your needs. You can also create a new Variable in the JS files like showLink and set this variable to true/false depending on some conditions. And then just use this boolean variable to show/hide the link with the method outlined below:
<div ng-if="data.solutionUrl1">
<!-- code to render the link-->
</div>
<div ng-if="!data.solutionUrl1">
<!-- code to render just the span without the link -->
</div>
I'm new to React.
Here's what I'm trying...
<a href={'/ViewOpportunity?OpportunityId=' + opportunity.opportunityId.toString()}'>Learn More</a>
...where this binding works...
<div className="col-md-12">
<br />{opportunity.description.toString()}
</div>
What's the proper way to add a query sting value in React?
I don't believe there is a proper way of making a query string in react, but I typically use URLSearchParams to make any query string that I need as it will automatically encode and make the structure of it for me and it's built into the browser.
let query = new URLSearchParams({OpportunityId:opportunity.opportunityId}).toString();
<a href={`/ViewOpportunity?${query}`>Learn More</a>
I'm not sure what the variable type of opportunityId is, but this would usually work for me. Although if it's something like an object, you'll likely have to use JSON.stringify.
I'm working on my own personal portfolio and I have my social media saved as a template to just pull from using this code in React.
{this.state.contact.map((contact, index) =>
<a className="social-icons" href={`${contact.href}`} target="_blank" rel="noopener noreferrer" key={index}>
<h3 className={`ion-social-${contact.title}`}></h3>
</a>
)}
I'm trying to create the same effect while using Vue for the ion-social-icons but I'm having a hard time figuring out how to implement it as I just receive an error talking about using v-bind:class that doesn't help much. This is what I'm currently trying.
<p class="social-media snippet ion-social-{{social.title}}" v-for="social in socials" v-bind:key="social">
{{ social.title }}
</p>
I'm relatively new to Vue also.
The error you get is:
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
For example, instead of <div class="{{ val }}">, use <div :class="val">.
Off the top of my head, there are 3 ways to set an html attribute in Vue.
You want to set a string literal. Just write it as if you were writing regular HTML.
class="myClass". You cannot interpolate javascript here, which is what you're trying to do and what Vue was warning about.
You want to use a javascript variable defined in your component. Use v-bind.
v-bind:class="myClassVariable"
Same as above, where : is just a shortcut for v-bind.
:class="myClassVariable"
A working example of your class binding looks like this,
<p class="social-media snippet" :class="'ion-social-'+social.title" ...
The value inside :class="..." is simply an expression, where 'ion-social' is a string literal that's appended with the variable social.title. Once your template gets messy, which imo it is now, you should remove logic from your template and put it inside the component.
Using interpolations in HTML attributes was possible in Vue 1.0, but is no longer supported since 2.0. Here, you need to use v-bind, then add the variable with the string like you would in JS.
<p
v-for="social in socials"
v-bind:class="'social-media snippet ion-social-' + social.title"
v-bind:key="social"
>
{{ social.title }}
</p>
After having created a few different spiders I thought I could scrape practically anything, but I've hit a roadblock.
Given the following code snippet:
<div class="col-md-4">
<div class="tab-title">Homepage</div>
<p>
<a target="_blank" rel="nofollow"
href="http://www.bitcoin.org">http://www.bitcoin.org
</a>
</p>
</div>
How would you go about selecting the link that is in within <a ... </a> based on the text within the tab-title div?
The reason that I require that condition is because there are several other links that fit this condition:
response.css('div.col-md-4 a::attr(href)').extract()
My best guess is the following:
response.css('div.col-md-4 div.tab-title:contains("Homepage") a::attr(href)').extract()
Any insights are appreciated! Thank you in advance.
Note: I am using Scrapy.
How about this using XPath:
response.xpath('//div[#class="tab-title" and contains(., "Homepage")]/..//a/#href')
Find a div with class tab-title which contains Homepage inside, then step up to the parent and look for a child on any level.
EDIT:
Using CSS, you should be able to do it like this:
response.css('div.tab-title:contains("Homepage") ~ * a::attr(href)')
The intent is to have a product name appear in the tooltip of a thumbnail.
Browsers do not create a tooltip from "ng-title" or "ng-attr-title."
We are using AngularJS version 1.0.7.
You can prepend any attribute with "ng-" or "ng-attr" and Angular will bind accordingly. However, it doesn't seem to "bind" to the title attirbute of the HTML "A" tag.
Ex. 1.
Code: <a title="{{product.shortDesc}}" ...>
Expected result: <a title="Canon Powershot XS50 12MB Digital Camera" ...>
Actual result: <a title="{{product.shortDesc}}" ...> We get undesired braces in the tooltip.
Ex. 2.
Code: <a ng-attr-title="{{product.shortDesc}}" ...>
Expected result: <a title="Canon Powershot XS50 12MB Digital Camera" ...>
Actual result: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>
We do not get a plain title attirbute, nor do we get a working tooltip.
It looks like ng-attr is a new directive in AngularJS 1.1.4 that you can possibly use in this case.
<!-- example -->
<a ng-attr-title="{{product.shortDesc}}"></a>
However, if you stay with 1.0.7, you can probably write a custom directive to mirror the effect.
Sometimes it is not desirable to use interpolation on title attribute or on any other attributes as for that matter, because
they get parsed before the interpolation takes place. So:
<!-- dont do this -->
<!-- <a title="{{product.shortDesc}}" ...> -->
If an attribute with a binding is prefixed with the ngAttr prefix (denormalized as ng-attr-) then during the binding will be applied to the corresponding unprefixed attribute. This allows you to bind to attributes that would otherwise be eagerly processed by browsers. The attribute will be set only when the binding is done. The prefix is then removed:
<!-- do this -->
<a ng-attr-title="{{product.shortDesc}}" ...>
(Ensure that you are not using a very earlier version of Angular). Here's a demo fiddle using v1.2.2:
Fiddle
The issue here is your version of AngularJS; ng-attr is not working due to the fact that it was introduced in version 1.1.4. I am unsure as to why title="{{product.shortDesc}}" isn't working for you, but I imagine it is for similar reasons (old Angular version). I tested this on 1.2.9 and it is working for me.
As for the other answers here, this is NOT among the few use cases for ng-attr! This is a simple double-curly-bracket situation:
<a title="{{product.shortDesc}}" ng-bind="product.shortDesc" />
Look at the fiddle here for a quick answer
data-ng-attr-title="{{d.age > 5 ? 'My age is greater than threshold': ''}}"
Displays Title over elements conditionally using Angular JS
The search query model lives in the scope defined by the ng-controller="whatever" directive. So if you want to bind the query model to <title>, you have to move the ngController declaration to an HTML element that is a common parent to both the body and title elements:
<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">
Ref: https://docs.angularjs.org/tutorial/step_03