I am new to aura components . I have field where project records are to be displayed .On click of field I should get project records
Desired outputOn click of input field , I should get records like this
Can anyone help me
**Component :**
<aura:component >
<div class="slds-align_absolute-center">
<lightning:layoutItem size="4">
<table> <tr><td style="padding:20px;">
<lightning:input type="sObject" aura:id="test" name="Project" label="Project" value="" placeholder="search project" onClick="{!c.handleClick}"/>
</td></tr>
</table>
</lightning:layoutItem>
</div>
</aura:component>
**Controller :**
public class ListOfProjects {
#AuraEnabled
public static List<project__c> getProjectList() {
List<project__c> myProjects = [SELECT Name from project__c ];
return myProjects;
}
}
**.Js file :**
({
handleClick : function(component, event, helper) {
var action = component.get("c.getProjectList");
action.setCallback(this, function(response) {
console.log(response.getReturnValue());
component.set("v.Projects" ,response.getReturnValue());
});
$A.enqueueAction(action);
}
})
[Required output][1]
[1]: https://i.stack.imgur.com/DQhXw.jpg
You can use lightning:combobox
https://developer.salesforce.com/docs/component-library/bundle/lightning:combobox/example
Related
I have a list of CheckModel classes with properties int Id and bool IsChecked. I want to filter them based on the IsChecked property.
When I render them in a foreach loop filtering the already checked items, I get buggy behavior. The item is removed from the view, but the item below that takes it's place in the view renders as checked, while in fact it is not.
Here is a gif showing this behavior:
It seems that Blazor's rendering somehow lags behind with the checkboxes..
Here is the code:
#page "/"
<div>
<input id="filter-collected-checkbox" type="checkbox" #bind="FilterChecked" />
<label for="filter-collected-checkbox">Filter</label>
</div>
#foreach((CheckModel item, int index) in CheckModels.Where(x=>!FilterChecked || !x.IsChecked).Select((x,i)=>(x,i)))
{
<div style="display: flex">
#item.Id
<input id="item-collected-checkbox-#index" type="checkbox" checked="#item.IsChecked" #onchange="(e)=>MarkItemCollected(e,item)"/>
</div>
}
#code {
public List<CheckModel> CheckModels { get; set; }
public bool FilterChecked { get; set; }
protected override void OnInitialized()
{
CheckModels = new List<CheckModel>();
for (int i = 0; i < 10; i++)
{
CheckModels.Add(new CheckModel() { Id = i });
}
}
private void MarkItemCollected(ChangeEventArgs e, CheckModel item)
{
item.IsChecked = (bool)e.Value;
}
}
The reason why I'm using html checked-attribute with #onchange is because I want to have a method after the binding has occurred. If I use #bind=IsChecked with #onclick=Method, the #onclick is fired before the binding.
Anyone know how to fix this?
You need to use the #key for the loop contents so the Render engine knows what items need updating.
<div #key=#item.Id style="display: flex">
Docs are here
Working REPL
FYI:
<div>
<input id="filter-collected-checkbox" type="checkbox" #bind="filterChecked" />
<label for="filter-collected-checkbox">Filter</label>
</div>
#foreach(var item in FilteredItems)
{
<div #key=#item.Id style="display: flex">
#item.Id
<input id="item-collected-checkbox-#item.Id" type="checkbox" #bind="#item.IsChecked" />
</div>
}
#code {
List<CheckModel> checkModels = Enumerable.Range(0,10)
.Select(i => new CheckModel() { Id = i })
.ToList();
bool filterChecked;
IEnumerable<CheckModel> FilteredItems =>
filterChecked ? checkModels.Where(x=> !x.IsChecked) : checkModels;
}
Renders the same result.
I Have a list of objects that i'm displaying, and i added a search box to filter a column, now when i enter a value, it works fine and the data is filtered.
The problem is, when i clear the search box, i don't get all the data back, i stay stuck with what i searched first, so i have to refresh every time i want to change the entered value or get the whole list.
Here's my Ts Code :
export class AdherentsComponent implements OnInit {
adherents: adherent[];
name: string;
constructor(private adherentService: AdherentService, private alertify: AlertifyService) { }
ngOnInit() {
this.getAdherents();
this.name = "";
}
getAdherents() {
this.adherentService.getAdherents().subscribe((
adherents: adherent[]) => {
this.adherents = adherents;
}, error => { this.alertify.error(error); })
}
Search() {
if (this.name.length > 0) {
this.adherents = this.adherents.filter(res => {
return res.nomcomplet.toLowerCase().match(this.name.toLowerCase());
})
}
else if (this.name.length === 0) {
this.adherents = this.adherents;
console.log(this.adherents.length);
}
}
}
Here's my Html Code :
<body >
<main role="main" class="container" >
<div class="jumbotron" style="background-color: white;">
<h2>Liste des Adhérents</h2>
<input type="text" [(ngModel)]="name" (input)="Search()" />
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th>Nom Complet</th>
<th>Grade</th>
<th>Poste</th>
<th>Telephone</th>
<th>E-mail</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let item of adherents">
<td>{{item.nomcomplet}}</td>
<td>{{item.grade}}</td>
<td>{{item.poste}}</td>
<td>{{item.telephone}}</td>
<td>{{item.email}}</td>
<td><button [routerLink]="['/adherents/', item.id]" style="margin-right: 0.2em;" title="Details" class="btn-sm btn-secondary text-white"><i class="fa fa-eye"></i></button>
<button [routerLink]="['/adherentEdit/', item.id]"
style="margin-right: 0.2em;" title="Modifier" class="btn-sm btn-primary text-white"><i class="fa fa-edit"></i></button></td>
</tr>
</table>
</div>
</main>
</body>
Please how can i modify The Search() Function so i can dynamically get data from the Array when changing the value in the search box input ?
Use a different variable for all the values and another one for the values that are displayed to the user. When you search you filter all elements and save them into the array that you are using to display to the user. Same occurs when you clear searchbox, simply get all values and save them to this array.
You are replacing the value in the property _adherents that contains all the values with a new value.
Instead you could
make _adherents private.
Create another property current_adherents that represents an array of your filtered/sorted output.
Use current_adherents in your template.
example code
export class AdherentsComponent implements OnInit {
private _adherents: adherent[];
public current_adherents: adherent[];
name: string;
// removed code irrelevant to the question
Search() {
this.current_adherents = this._adherents.filter(res => {
return res.nomcomplet.toLowerCase().match(this.name.toLowerCase());
})
}
}
Edit: if name is an empty string by definition it will match all elements. So you could remove your if/else logic too ;).
I have the following code :
http://plnkr.co/edit/RqLurBaCsgjQjOYMtl8r?p=preview
here there is a textbox and when user add something to the textbox and push add button then the entered text should be added to the table Here is my javaScript code:
var app = angular.module('app', []);
app.factory('Service', function() {
var typesHash = [ {
id : '1',
name : 'lemon',
price : 100,
unit : 2.5
}, {
id : '2',
name : 'meat',
price : 200,
unit : 3.3
} ];
var service = {
addTable : addTable,
getData : getData,
};
return service;
function addTable(data) {
typesHash.push(data);
}
function getData() {
return typesHash;
}
});
app.controller('table', function(Service) {
//get the return data from getData funtion in factory
this.typesHash = Service.getData();
this.testData = {
id : '1',
name : "test",
price : 100,
unit : 2.5
};
//get the addtable function from factory
this.addTable = Service.addTable;
});
here as far as testData is static as follow it works:
this.testData = {
id : '1',
name : "test",
price : 100,
unit : 2.5
};
but here the text in the textbox is not added so I changed the above code as follow:
this.testData = {
id : '1',
name : $("#txt").val(),
price : 100,
unit : 2.5
};
the name gets nothing and row is added but name spot is empty?
Just a quick note that this is a simpler version of my real code and I have a reason to use factory.
Can ahyone help me to find out why this table does not connect to textbox correctly?
Modified version of the plnkr (ooo nice design changes SO).
Updated pasted a bad plnkr link before.
http://plnkr.co/edit/4g7LGRLBNEH2LeuEm1qN?p=preview
code from the post, let me know if this doesn't cover some scenario you were imagining. I tried getting rid of all the style cruft, that should be done in CSS or using things like text-right or text-center provided by bootstrap.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link data-require="bootstrap#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
<script>
var app = angular.module('app', []);
app.factory('Service', function() {
var typesHash = [ {
id :1,
name : 'lemon',
price : 100,
unit : 2.5
}, {
id : 2,
name : 'meat',
price : 200,
unit : 3.3
} ];
var localId = 3;
var service = {
addTable : addTable,
getData : getData,
};
return service;
function addTable(name) {
typesHash.push({id:localId++, name:name, price:100,unit:1});
}
function getData() {
return typesHash;
}
});
app.controller('table', function(Service) {
//get the return data from getData funtion in factory
this.typesHash = Service.getData();
//get the addtable function from factory
this.addTable = Service.addTable;
});
</script>
</head>
<body ng-app="app" ng-controller="table as tableTools">
<form>
<div class="row commonRow">
<div class="col-xs-1 text-right">
item:
</div>
<div class="col-xs-5">
<input id="txt" type="text" style="width: 100%;" ng-model="tableTools.inputData" />
</div>
<div class="col-xs-2">
<button class="btn btn-primary" ng-click="tableTools.addTable(tableTools.inputData);tableTools.inputData=''">
click me
</button>
</div>
</div>
</form>
<div class="row commonRow">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<table class="table table-hover">
<thead>
<tr>
<th>item</th>
</tr>
</thead>
<tbody ng-controller="table as iterateTb">
<tr ng-repeat="x in iterateTb.typesHash track by x.id">
<td>
<div>{{x.name}}</div>
</td>
<td>
<input type="text" ng-model="x.name"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
here is the updated plunker :-
http://plnkr.co/edit/uDIEAjRtpM7MnQu72LAA?p=preview
I just added data.name=$("#txt").val(); before pushing the data into array.
function addTable(data) {
data.name=$("#txt").val();
typesHash.push(data);
}
Hope it helps :-)
I am trying to display images from database but it appears I able to display the URL name instead of the picture.
Any help please? thanks!
i am using sql server 2008 r2 My datatype in the table for image is nvarchar (as I require to use this instead of image):
ImageURL1 nvarchar(255)
Here's how I create the picture to database. I call it create.cshtml
<div class="editor-label">
#Html.LabelFor(model => model.ImageURL1)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.ImageURL1, new { type = "file" })
#Html.ValidationMessageFor(model => model.ImageURL1)
</div>
Here's my display view of my pages (but it seems only able to display the URL LINK instead of the picture).
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.ActivityTask.activityID)
</td>
<td>
#Html.DisplayFor(modelItem => item.TaskID)
</td>
<td>
#Html.DisplayFor(modelItem => item.ImageURL1)
</td>
<td>
<img src="#Url.Action("GetImage", "MemoryController",new { id = item.ImageURL1 })" />
</td>
Here's my controller codes
[HttpPost]
public ActionResult Create(Memory memory)
{
if (ModelState.IsValid)
{
db.Memories.Add(memory);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.ActivityID = new SelectList(db.ActivityTasks, "activityID", "activityID", memory.ActivityID);
ViewBag.TaskID = new SelectList(db.ActivityTasks, "taskID", "taskID", memory.TaskID);
ViewBag.ImageURL1 = new SelectList(db.ActivityTasks, "ImageURL1", "ImageURL1", memory.ImageURL1);
return View(memory);
}
and the code I have a hard time figuring out how to call
// get image view
public ActionResult GetImage(int id)
{
Memory memory = db.Memories.Find(id);
var imagedata = memory.ImageURL1;
return File(imagedata, "image/jpg");
}
It is simpler than that. All you have to do is reference the image you want.
#Url.Content("~/Content/Images/Pic.png")
I have developed simple angular-firebase application which provide basic CRUD functionality.
json format in firebase
{
"-J0wuZ_J8P1EO5g4Xfw6" : {
"contact" : "56231545",
"company" : "info",
"city" : "limbdi",
"name" : "priya"
},
"-J0wrhrtgFvIdyMcSL0x" : {
"contact" : "65325422",
"company" : "rilance",
"city" : "jamnagar",
"name" : "pihu"
}
}
angular-code for listing all data in html page
<table class='table table-hover'>
<tr>
<th>Name</th>
<th>City</th>
<th>Company</th>
<th>Contact</th>
<th></th>
</tr>
<tr ng-repeat="item in employee">
<td>{{item.name}}</td>
<td>{{item.city}}</td>
<td>{{item.company}}</td>
<td>{{item.contact}}</td>
<td><button class='btn btn-warning btn-mini' ng-click='delemp(employee[$index])'>X</button></td>
</tr>
</table>
when someone click on button it fire delemp function which take employee's current index as argument.
var myapp = angular.module('myapp',['firebase']);
myapp.controller('MyCtrl', ['$scope', 'angularFireCollection',
function MyCtrl($scope, angularFireCollection) {
$scope.delemp=function($current_emp){
alert($current_emp.name);
};
}
]);
this alert box contain current employee's name. I want to delete current row of employee. but I don't know how to use remove() method of firebase. I have visited documentation of firebase so I got bellow code which is working nice.
var current = new Firebase('https://myurl/employee/-J48go0dwY5M3jAC34Op');
current.onDisconnect().remove();
but I want to make it dynamically so how can I get parent id of current node like -J48go0dwY5M3jAC34Op ?
please help me to figure out small issue.
instead of passing the object, you could just pass the id into your delete function.
<li ng-repeat="(key,item) in list">
<button ng-click="deleteItem(key)">delete</button> {{item.name}}
</li>
$scope.deleteItem = function(id){
var itemRef = new Firebase(url + '/' + id);
itemRef.remove();
}
edit:
this also works
<div ng-repeat="item in list">
<button ng-click="writeID(item)">log id</button>{{item.$id}} {{item}}<hr>
</div>
$scope.writeID = function(o){
console.log(o.$id);
}
If it's a firebaseArray, you can also do it this way:
$scope.deleteItem = function(item){
employee.$remove(item);
}
Just pass the item you want to remove from the object.
Note: It won't work for firebaseObjects.
Useful sources:
https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebasearray-removerecordorindex
https://gist.github.com/anantn/4325082