Salesforce Lightning Component - salesforce

I am creating a salesforce lightning component to list the leads of the current logged in user.
I have managed to write the following code, but when i add the component to the page, and preview it, I dont see any leads.
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
<div class="slds">
<table class="slds-table slds-table--bordered slds-table--striped">
<thead>
<tr>
<th scope="col"><span class="slds-truncate">Company</span></th>
<th scope="col"><span class="slds-truncate">Annual Revenue</span></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.leads}" var="lead">
<tr>
<td>{!lead.Company}</td>
<td>{!lead.AnnualRevenue}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
It will be great, if someone could tell me what is that I am doing wrong. Thank you

You can follow the tutorial for Displaying a Contact List and replace the Logic with that for Leads
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_one_demo_load.htm

This might be because
You have not added a controller on your lightning component.
<aura:component implements="forceCommunity:availableForAllPageTypes" controller="ContactController" access="global" >
You have not declared the attribute "leads" which you have used in the iteration.
<aura:attribute name="leads" type="Lead[]"/>
You have not set the "leads" attribute which you fetched from the Apex controller.
controller.set("v.leads", variableWithLeadsList);
You have not fetched data from the Apex controller. In this case, as mentioned by Rajdeep Dua, https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_one_demo_load.htm link explains the whole process and will help you if you replace Contact with Lead.

Related

TrNgGrid display custom column filter

I'm trying to add custom column filter (autocomplete, select ...) but can't find how. I tried to override default filter template with a tr-ng-grid-column-filter attribute on a th, but it does not works. Header is changed somehow (title is not bold anymore) and the new template is not used at all.
Is the tr-ng-grid-column-filter right way to do it at all or there is something else?
Data is sorted, paginated and filtered on the server so it does not have any relation to angular or trnggrid client side filtering & formating. So I just want to display some other input on some columns (e.g. select) instead of default input text rendered by a grid.
I'm using angular 1.2.22 with TrNgGrid 3.0.3
There are some samples floating around the net. Here's one:
http://plnkr.co/edit/I6JJQD?p=preview
<table tr-ng-grid='' items='myItems'>
<thead>
<tr>
<th field-name="name"></th>
<th field-name="computedTagsField" display-format="computedTags:gridItem">
<div>
<div class="tr-ng-title">Tags</div>
<div class="tr-ng-column-filter">
<select class="form-control input-sm" ng-options="tag for tag in [null, 'tennis', 'basketball', 'volley']" ng-model="columnOptions.filter"></select>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td field-name="computedTagsField"></td>
</tr>
</tbody>
</table>
I created a directive to implement a custom drop down filter. It, in itself, can be reused on any project, but it will also give you a good working example of how to implement your own custom filter by simply extending TRNG grid.
Tutorial:
http://www.davidcline.info/2015/08/trnggrid-dropdown-column-filter.html
Demo:
http://embed.plnkr.co/w39Xt74pippDajyqUIOD/preview

jsp servlet pass variable in table row to servlet without form

<table id="searchTable"><%
for (int i=0; i<userList.size();i++){
User user=userList.get(i);%>
<tr>
<td id="leftSearchResult">
<span class="resultUsername">Name: <%=user.getUserName()%></span></br>
</td>
<td>
<!--Button to visit profile here-->
</td>
</tr>
<%}%>
</table>
I have this search user function, and for each result a table row is created with the username of the user. What I want to do is that when you press the visit profile button in the table row it will send the username in that row to the servlet. How do I do that? Also, can you pass variables to servlets without the use of forms? I know how to retrieve data from forms to the servlet with request.getParameter(), but not sure what to do in this situation. (The userList array is an arraylist of User objects retrieved from the database when you perform the search function. Did not include that code portion here.)
Use a link with a request parameter. And learn not to use scriptlets in JSPs. Use the JSP EL and the JSTL instead:
<table id="searchTable">
<c:forEach items="${userList}" var="user">
<tr>
<td id="leftSearchResult">
<span class="resultUsername">
Name: <c:out value="${user.userName}"/>
</span>
</td>
<td>
<a href="<c:url value="/userDetails">
<c:param name="userId" value="${user.id}"/>
</c:url>">Details</a>
</td>
</tr>
</c:forEach>
</table>
The above will generate a link with a URL like /userDetails?userId=1234, and the servlet mapped to /userDetails will then be able to access the user ID using request.getParameter("userId").

How to get Angular to update the Ui from within the controller

I have the following html.
<div ng-controller="CustCtrl">
<table class="table table-condensed">
<thead>
etc.
</thead>
<tbody>
<tr ng-repeat="customer in customers" data-cust-id="{{customer.Id}}">
<td>
<button ng-model="Id" tracking-{{customer.Tracking}} ng-click="startTrackingCustById(customer.Id)">
</button>
</td>
etc.
</tr>
</tbody>
</table>
So the button has a class that is databound to the customer.Tracking value which is either true or false. When the button is clicked the startTrackingCustById() method is successfully called and the customer object in the customers object is successfully changed like customer.Tracking = true.
But the buttons class is not updated. What am I missing?
Look at using ng-class . For a boolean value in scope you would use:
ng-class="{'classNameToAddIfTrue':customer.Tracking}"
In the CustCtrl I wrapped the call that updated the customers array like this
$scope.$apply($scope.customers[i].Tracking = true);
Based on the suggestion in an answer I will link to when I find it that basically said "If you are having trouble updating the view you most likely need to use $scope.$apply
So that get's it to work. Now I need to figure out why and how.

apex:actionFunction rerender on non visualforce components

I have an HTML table setup in a visualforce page with some functionality that appears to be outside of the grasp of a standard apex:datatable. When a user updates the information for one of the rows, I'm attempting to rerender the table so the updated values are reflected. If I use an apex:datatable this works fine, BUT then i lose a lot of the functionality I had to add in my table.
The structure is fairly simple, but this is how it goes:
<table>
<thead>
<tr>
<th>Col 1</th>
</tr>
</thead>
<tbody>
<apex:outputPanel id="table-panel">
<apex:repeat value="{!Parent}" var="row">
<tr name="{!row.Id}">
<td>Cell 1</td>
</tr>
<apex:repeat value="Child__r" var="child">
<tr name="child-{!row.Id}">
<td>Child Cell 1</td>
</tr>
</apex:repeat>
</apex:repeat>
</apex:outputPanel>
</tbody>
</table>
This is in essence the functionality I'm trying to accomplish, with a parent object's children listed below it. As of right now, the rerender converts all my table elements into spans and completely garbles everything. Is it possible to rerender a non-visualforce component, or, alternatively, is there a way I could reproduce this functionality in an apex:datatable?
Thanks!
Its easy. Try this, works fine for me even after rerender:
<apex:panelGrid columns="1" width="400" id="myTable">
<apex:facet name="header">
<apex:outputText value="My table header"/>
</apex:facet>
<apex:repeat value="{!Object}" var="row">
<apex:outputText value="{!row.name}" style="display:block;font-weight:bold;"/>
<apex:repeat value="{!row.ObjectChild__r}" var="child">
<apex:outputText value="{!child.name}"/> <br/>
</apex:repeat>
</apex:repeat>
</apex:panelGrid>
Noe you can reRender your "myTable".
I actually ended up discovering the nifty little "layout" attribute of the apex:outputPanel element. Setting this to "block" completely solved all the problems associated with this.

ICEfaces: How to pass parameters from one page to another

I have this simple scenario which doesn't work: I use icefaces and i have a simple page with some inputTexts and a submit button, this button will redirect to another page that will display the values of these inputTexts... my question is how can i get the values of these inputTexts from the request and display them in another page?
When i use the following API in the other page backbean, i get only the name of the page that holds the inputTexts:
FacesContext.getCurrentInstance().getExternalContext().getRequestMap();
I really did spent alot of time trying to get this thing to work, so any help will be appreciated.. THx
my page code is:
<ice:form id="form1">
<table border="0">
<tbody>
<tr>
<td><ice:outputText value="Name"></ice:outputText><br></br></td>
<td><ice:inputText id="name" value="#{newContest.name}"></ice:inputText></td>
</tr>
<tr>
<td><ice:outputText value="End Date"></ice:outputText></td>
<td><ice:inputText id="endDate" value="#{newContest.endDate}"></ice:inputText></td>
</tr>
<tr>
<td><ice:outputText value="private? (only you can see the entries)"></ice:outputText></td>
<td><ice:inputText id="private" value="#{newContest.isPublic}"></ice:inputText></td>
</tr>
<tr>
<td><ice:outputText value="Price"></ice:outputText></td>
<td><ice:inputText id="price" value="#{newContest.price}"></ice:inputText></td>
</tr>
<tr>
<td><ice:outputText value="Description"></ice:outputText></td>
<td><ice:inputTextarea id="description" value="#{newContest.description}"></ice:inputTextarea></td>
</tr>
<tr>
<td><br></br><ice:commandButton value="proceed to payment" style="color:blue" action="#{newContest.createContest}"></ice:commandButton></td>
</tr>
</tbody>
</table>
You can bind another bean with current one as a managed property in faces-config.xml as follows.
<managed-bean>
<managed-bean-name>newContest</managed-bean-name>
<managed-bean-class>com.newContest</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>anotherBackingBean</property-name>
<property-class>com.AnotherBackingBean</property-class>
<value>#{anotherBackingBean}</value>
</managed-property>
</managed-bean>
<navigation-rule>
<navigation-case>
<from-outcome>view-anotherBackingBean</from-outcome>
<to-view-id>/jsp/another-page.jspx</to-view-id>
</navigation-case>
</navigation-rule>
Bean Content
Class NewContest {
public AnotherBackingBean anotherBackingBean;
//-- set/get & other methods
public String redirectToAnotherBackingBean(){
anotherBackingBean.setSomeObject(object);
//-- set custom fields
return "view-anotherBackingBean";
}
}
Then you can get your fields directly available in other bean which have been set in current bean.

Resources