I would like to build a salesforce component where user will provide image link & the component will display the image. So I tried following code
lightning component
<aura:component implements="flexipage:availableForAllPageTypes" access="global"
controller="MyController" >
<lightning:card title="Partner Information">
<Div>
<p><lightning:input aura:name="image" label ="Enter image url" type="text"/></p>
<br></br>
<img url="{!image}" />
</Div>
</lightning:card>
</aura:component>
But it's not displaying the image after inserting the image url
I also tried with the option
<img url="{!v.image}" />
but I got the error message Access Check Failed! AttributeSet.get(): attribute 'image' of component
Can you guide me to display the image?
So the proper way to handle this would be by using the aura:html component. There are a few parameters you would set for this:
aura:id- String- your id to locate the elements within JS
tag- String- the html tag
HTMLAttributes- Map- No need to set this explicitly on the .cmp, we'll use Js
<!--YourComponent.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global" >
<!--Remember to define your binding attribute-->
<aura:attribute name="image" type="String"/>
<lightning:card title="Partner Information">
<div class="slds-p-around_medium">
<p>
<!--Set you attribute as the value of the lightning:input component-->
<lightning:input aura:name="image"
label ="Enter image url"
value="{!v.image}"
type="text"
onchange="{!c.handleUrlChange}"/>
</p>
<br/>
<!--Set the aura:id so you can access it in js, use component.find to locate-->
<aura:html aura:id="imgDiv" tag="img"/>
</div>
</lightning:card>
</aura:component>
//YourComponentController.js
({
handleUrlChange : function(component, event, helper) {
//Grab the value from the attribute or you can use event.getParam("value");
var imageUrl = component.get("v.image");
//Define the map, find the img tag generated by aura:html,
//and set the HTMLAttributes to your map
var newMapAttributes = {"src": imageUrl};
component.find("imgDiv").set("v.HTMLAttributes",newMapAttributes);
}
})
You are also using the url attribute on your image tag instead of the src attribute. You may be able to directly bind to the img element, but aura:html works really well. Hope that answers your question!
Related
When i add <br/> inside the content property or pass to <p> tag, it's reflecting as text. I wish to break the line passing <br> into the content
Below are things i tried, both didn't work
<p>{item.description}</p>
<Text content={item.description} />
//Text is a component to output content within a p tag
json data as below
{
"description": "Add some break <br/> to this line"
}
dangerouslySetInnerHTML is what you need here to display your json data as html.
You could do something like this
<Text
dangerouslySetInnerHTML={{ __html: item.description }}
/>
I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>
I am using following code to edit value of a record. And the code is working fine.
<rich:popupPanel header="Edit Company Region" id="editCompanyRegionPane"
domElementAttachment="parent" width="230" height="115">
<h:form>
<h:panelGrid columns="3" id="editCompanyRegionGrid">
<h:inputHidden value="#{CompanyAdminPageModel.editCompanyRegion.companyRegionId}"
id="editcompanyRegionId">
</h:inputHidden>
<h:message for="editcompanyRegionId" />
<h:column>
<h:outputText value="Name " />
<h:inputText value="#{CompanyAdminPageModel.editCompanyRegion.name}"
id="editCompanyRegionName">
</h:inputText>
<h:message for="editCompanyRegionName" />
</h:column>
</h:panelGrid>
<h:commandButton value="Update"
action="#{CompanyAdminPageModel.companyRegionUpdate}" render="table"
oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editCompanyRegionPane')}.hide();}" />
<h:commandButton value="Cancel"
onclick="#{rich:component('editCompanyRegionPane')}.hide(); return false;" />
</h:form>
</rich:popupPanel>
I want to show a message in the same page after updating the value in database. For example: when I will click on the update button then it will call method from Bean class and then update value in the DB and after closing the popup panel it will display a message (like: updated successfully) inside the same page.
Any help please.
I used follwoing java code:
public String updateUser(Long usrId, String firstName, String lastName,
String loginName, String emailAddr) {
AllCompanyDAO aDAO = new AllCompanyDAO();
FacesContext.getCurrentInstance().addMessage("test", new javax.faces.application.FacesMessage("Success"));
return aDAO.userUpdate(usrId, firstName, lastName, loginName, emailAddr);
}
and following jsf code:
<div class="content container">
<div style="padding-left:220px;">
To see the relationships between users and regions <a href="#{appPath}/app/insertion/userRegionInfo.faces" >click here</a> <br/>
<h:message for="test"></h:message>
</div>
</div>
At the end of companyRegionUpdate(), add :
A message
FacesContext.getCurrentInstance().addMessage("test", new FacesMessage("Success"));
Where test is the absolute reference to the <h:message> JSF component.
To your <h:commandButton> , add Ajax support
Such as
<h:commandButton value="Update" >
<a4j:support oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editCompanyRegionPane')}.hide();}" action="#{CompanyAdminPageModel.companyRegionUpdate}" event="onclick" reRender="test, table" />
</h:commandButton>
Where test is the absolute reference to the <h:message> JSF component.
Instead of adding ajax support to your <h:commandButton>, you could simply use <a4j:commandButton > component which has ajax support.
I used following code that solved my problem.
1. Used the following code in the companyRegionUpdate method in java.
FacesContext.getCurrentInstance().addMessage("test", new javax.faces.application.FacesMessage("Successful"));
Then used <h:messages /> inside my desired div. <h:messages /> is different than <h:message />. In my case <h:messages /> works.
That's it. :-)
all:
Is there a way to dynamically add a tag (especially a custom tag) in AngularJS?
I have a custom tag recently created of the type:
<mytag type="small" />
which I am attempting to manage in a larger <div> element. What I would like to do is place, within the div element, a button that, when pressed, causes the creation of a new mytag element within the div.
In other words, given an initial page composition:
<div ng-controller="tagControl">
<div id="tagdiv">
<mytag type="small" />
</div>
<div id="Controls">
<button ng-click="addTag()">Add New Tag</button>
<button ng-click="clearTags()">Clear All Tags</button>
</div>
</div>
I would like to put something in the tagControl's addTag() function that adds a new mytag tag whenever the "Add New Tag" button is pressed, and I'd like to put something in the clearTags() function that removes all added tags when the "Clear All Tags" button is pressed.
Is this possible using AngularJS? If not, can it be accomplished using a third- party library? In either event, how can this be done?
Thanks in advance for any insights...
You need to think in terms of MVC and not DOM manipulation. How many of your <mytag>s you want to show up should be driven by something in your model. And then your HTML would look like this:
<div ng-controller="tagControl">
<div id="tagdiv">
<mytag type="small" ng-repeat="foo in items" />
</div>
<div id="Controls">
<button ng-click="addTag()">Add New Tag</button>
<button ng-click="clearTags()">Clear All Tags</button>
</div>
</div>
Then your addTag() method would just add to the items model and the clearTags() would clear the list. Angular will add the tags for you as you update the model
I have a commandButton in a visualforce component. The expected behavior is that the controller method would be called. The page is refreshed, but the method registered in the commandButton {!performUnlinkContact} is not called. The strange thing is that if I put the button on the base visualforce page, it calls the controller method as expected - but when in a component, it does not.
Here is my component:
<apex:component >
<apex:attribute name="rk" description="RK Base Contact Data" type="Object" required="true"/>
<div class="unlinkBox">
<div class="unlinkHeader">
<div class="unlinkHeaderLeft">Wrong Contact?</div>
<div class="unlinkHeaderRight"><apex:image style="cursor: pointer;" value="{!$Resource.x}" alt="Close Panel" /></div>
</div>
<div class="unlinkBody">
<div class="unlinkBodyLeft">
Click Yes if the Contact displayed is incorrect.<br/><br/>You will be given the opportunity to link to a different Contact.
</div>
<div class="unlinkBodyRight">
<apex:outputpanel id="callMethod">
<apex:commandbutton value="Yes, this is the wrong contact" action="{!performUnlinkContact}" rerender="" status="myDisplayStatus" /> <a onclick="return hideUnlinkPanel()" style="color:blue;cursor:pointer;text-decoration:underline">No</a>
</apex:outputpanel>
<apex:actionStatus id="myDisplayStatus" startText="(performing Contact Unlink...)" stopText=""/>
</div>
</div>
</div>
</apex:component>
and here is the method in the controller extension:
public PageReference performUnlinkContact() {
System.debug('==================================!!performUnlink');
if (this.thisLead.rkContactId__c != 0) {
this.thisLead.rkContactId__c = 0;
update this.thisLead;
}
return null;
}
I'm sure I must be doing something wrong since I am new to salesforce and still learning, but I am unable to find any related issues when I search on how to resolve this issue. Thanks in advance for the help.
Thanks for the replies - to resolve I ended up adding an actionFunction to the base Page, then just calling this function in the component via a button's onclick event:
Code in base page:
<apex:actionFunction name="doUnlink" action="{!performUnlinkContact}" rerender="refresh" status="myStatus"/>
Code to call function in the component:
<input type="button" value="Yes, this is the wrong contact" onclick="doUnlink();" />
This method seems to work well so far.
You can also pass a reference of performUnlinkContact() to the component, using an apex:attribute of type ApexPages.Action, and then when your commandButton uses this reference, it will call the method defined in the page controller.
<apex:component>
<apex:attribute name="performUnlinkContact" type="ApexPages.Action" description="Passing method from controller"/>
<!-- your stuff here -->
</apex:component>
Then when you use your component, you have to populate that attribute like so:
<c:MyComponent performUnlinkContact="{!performUnlinkContact}"
I think rerender="" is not a way to do a fake reRender command. I would try it with rerender="none".