I am building a lightning datatable with Aura component and I am showing data in this table from external system and I want to select one or more record so that I can import selected data in salesforce and after importing I want to to highlight that rows which had selected and imported in salesforce.
enter image description hereWhen you import data from external source than add an extra key value in json or js-object.,let's say isExternal which has value =''slds-theme_success" and use it is cellAttributes in lightningdatable, you can use cellAttributes in each column to highlight whole row.
Ex:-
Columns=[{ label: 'test', fieldName:'test' , cellAttributes:{class: { fieldName: 'isExternal' }} } ];
I have form which is displaying input fields dynamically which means that for specific customer is showed different input fields. Sequence and which input fields are shown is driven by database. For each input filed I would like to make typeahead. Complete form is represented with the object below:
{
attributes:Array[9]
s_Id:1376
name:"test_name"
c_Id:512
active:true
created:"2016-11-28T09:47:35.000+0000"
updated:"2016-12-05T14:52:17.649+0000"
valid:Moment
}
All information about input files are stored in array attributes which is list of object shown below. In this object there is array attvalue which present all previous values inserted for this specific field and this is actually typeahead for specific input field.
{
attributeId:138
attributevalueId:618
c_Id:512
s_Id:1376
attvalue:Array[4]
0:"Typeahead value 1"
1:"Typeahead value 2"
2:"Typeahead value 3"
3:"Typeahead value 4"
language:"en"
updatedAt:"2016-12-05T14:52:17.649+0000"
created:"2016-11-28T09:47:35.000+0000"
}
On view I loop over attributes array to display form. For showing typeahead I have in input HTML element:
typeahead="attvalue as object.attvalue for object in object attributes| limitTo:100" ng-maxlength="45" autocomplete="off"
This does not show appropriate values, which for specific typeahead it should be shown like this (written in JS way):
object.attributes:Array[10].attvalue=["Typeahead value 1", "Typeahead value 2", "Typeahead value 3", "Typeahead value 4"]
How to solve this issue? Better solution would be to solve it on view, then chaning complete controller.
I have found out how to solve this issues. First off all it is possible to make very complex list and objects, etc and still use bootstrap typeahead, becaues I have seen a lot of simple examples. Firt I have added array attvalues to list attributevalueList and property attvalue is just used for final value with ng-model directive. New object in list looked like this:
object.attributes:Array[1].attvalues:
{
attributeId:138
attributevalueId:618
c_Id:512
s_Id:1376
attvalue:""
attvalues:Array[4]
0:"Typeahead value 1"
1:"Typeahead value 2"
2:"Typeahead value 3"
3:"Typeahead value 4"
language:"en"
updatedAt:"2016-12-05T14:52:17.649+0000"
created:"2016-11-28T09:47:35.000+0000"
}
I have corrected typeahed on view as follows:
typeahead="attvalues for attvalues in object.attributevalueList[$index].attvalues | limitTo:100" ng-maxlength="45" autocomplete="off">
I am using a view which has some fields like:
items: [
{
xtype:'textareafield',
name: 'name_content'
}]
Now this view has been included in other multiple views(Multiple tabs).
I am setting the value in the field by using getForm().findField('name_content).setValue().
It is working if one tab call the view.But If two tabs are opened both calling the same view. Value is not being displayed for send one.
How should I do it.
You could try assigning an id to the text area and then using Ext.getCmp('id').
I've seen some ExtJS people say that there are better/more efficient ways than using "id" but you can at least make sure that works.
items: [
{
xtype:'textareafield',
name: 'name_content',
id: 'my_text_area_id',
}]
Then later
Ext.getCmp('my_text_area_id').getValue();
I am maintaining a site that allows users to create a profile of sorts that will allow them to broadcast activities to a feed. I implement ng-grid to keep track of all the profiles that are created, and have created two buttons that allow users to create/edit these profiles. My only problem right now is, when users select a row on the grid and attempt to edit that specific row, the drop-down menu is not auto-populated with the data from ngModel.
This is the part of the form I am having trouble with:
<select ng-model="source.canSendTo" ng-options="value.name for value in sourceCanSendTo" data-style="btn" bs-select></select>
And within the controller, I have sourceCanSendTo defined as:
$scope.sourceCanSendTo = [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ];
On row selection, I simply set source = the selected item, and console.logs show that all the data is there. The other parts of the form are being populated properly (mainly s), and console.log($scope.source.canSendTo) shows that the original data is there, it's just that select is defaulted to being blank...how would I go about trying to pre-select certain elements on the drop-down select I currently have?
For example, if the profile has 'abc', 'bcd' selected, how can I make it so that when I edit that profile, the drop down box shows 'abc,bcd' instead of just "Nothing Selected"?
Edit: I previously responded to a comment inquiring about bs-select, saying that it simply controlled some CSS elements of the drop down box - seems like this is completely incorrect after a quick google search when everything else led to dead ends. Does anyone have any idea how to properly initialize the model with data so that when I preload my form, the 'can send to' drop down select actually has the selected options selected, as opposed to saying "Nothing Selected"? Thanks in advance for all help!
As you are binding source.canSendTo to the name (value.name) of sourceCanSendTo then you just need to initially have an structure binding the names which had been saved, something like this:
source.canSendTo = ['abc', 'bcd']; //And all the selected values
So you need to construct your source.canSendTo property to this structure.
PS: If you show how you bring your data from the server, I can help you to construct the source.canSendTo property.
$scope.canSendTo must be initialized with a reference to the selected option.
var initialSelection = 0;
$scope.source = { canSendTo : [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ] };
$scope.canSendTo = $scope.source.canSendTo[initialSelection];
Finally found out what was wrong with my code - seems like the data being stored in the model wasn't the same as what was in ngOptions, played around a bit with ngOptions and managed to get something that works. Working snippet of code:
<select ng-model="sendTo.name" ng-option="value.name as value.name for value in sourceCanSendTo" data-style="btn" multiple bs-select>
(Realized that the variable being used for ngModel was a fairly ambiguous in terms of naming convention, changed it)
Scenario
Lets say I am owner of a big company that has many stores. Depending on what role (place in the organization) I have within the company, I will have different access to data. There will be different modules and for this specific question there is one where users that have access can go through daily cost and sales.
(If that's legal or not...don't care, it's just for an example.)
The user thereby get all data through REST API from BackEnd (Java application) with all data for all stores the user has access to. The user should then be able to filter the data, by different filter combinations. Most relevant for my question is the date interval by days.
There will be some charts showing data on different levels and below there will be a table area where I want the multi-level tables, hence my question.
Done so far
I first created accordions that have stores on accordion-group level and then next level of data in a table, within the accordion-body. (Only hard coded data at the moment.) The problem here was that an according heading is a string and after some discussion we felt that this was not a good solution since the heading would consist of parts of data that in a table would have been separate columns. It would therefore be difficult to "columnize" the heading data to match horizontally the different "stores" (between the accordion headings) when collapsed (and of course even more messy when one or more accordion are expanded).
I replaced the accordions with table and ng-repeat. Have successfully populated the first table level with both data from the figurative API with JSON data as well as got i18next working for the headings.
JSON
{
"metadata":{
"storesInTotal":"25",
"storesInRepresentation":"2"
},
"storedata":[
{
"store" : {
"storeId" : "1000",
"storeName" : "Store 1",
"storePhone" : "+46 31 1234567",
"storeAddress": "Some street 1",
"storeCity" : "Gothenburg"
},
"data" : {
"startDate" : "2013-07-01",
"endDate" : "2013-07-02",
"costTotal" : "100000",
"salesTotal" : "150000",
"revenueTotal" : "50000",
"averageEmployees" : "3.5",
"averageEmployeesHours" : "26.5",
"dayData" : [
{
"date" : "2013-07-01",
"cost" : "25000",
"sales" : "15000",
"revenue" : "4000",
"employees" : "3",
"employeesHoursSum" : "24"
},
{
"date" : "2013-07-02",
"cost" : "25000",
"sales" : "16000",
"revenue" : "5000",
"employees" : "4",
"employeesHoursSum" : "29"
}
]
}
},
{
"store" : {
"storeId" : "2000",
"storeName" : "Store 2",
"storePhone" : "+46 8 9876543",
"storeAddress": "Big street 100",
"storeCity" : "Stockholm"
},
"data" : {
"startDate" : "2013-07-01",
"endDate" : "2013-07-02",
"costTotal" : "170000",
"salesTotal" : "250000",
"revenueTotal" : "80000",
"averageEmployees" : "4.5",
"averageEmployeesHours" : "35",
"dayData" : [
{
"date" : "2013-07-01",
"cost" : "85000",
"sales" : "120000",
"revenue" : "35000",
"employees" : "5",
"employeesHoursSum" : "38"
},
{
"date" : "2013-07-02",
"cost" : "85000",
"sales" : "130000",
"revenue" : "45000",
"employees" : "4",
"employeesHoursSum" : "32"
}
]
}
}
],
"_links":{
"self":{
"href":"/storedata/between/2013-07-01/2013-07-02"
}
}
}
Visual example - JSFiddle
Check the values in the result frame, top left corner. Try clicking for example row with Store ID 2000, then with 3000 and then 3000 again to see how the values change.
Current update of my JSFiddle
Wanted functionality
When a row is clicked (as shown in the JSFiddle), I want a directive or something triggered, to go and fetch underlying data (dayData) for the store clicked and show all days in the date interval. I.e expanding the row, and including a new table under the clicked row, which also should use ng-repeat to get all data displayed similar to the existing one, but inline.
Question
So I have already got the functionality to get the $index and also the specific data from the clicked row.
What kind of directive or any other solution do I need additionally to get the "data when row clicked" and presented in a table under the clicked row?
I don't want it in the DOM all the time, since there might be many dayData for each store and many stores. (And will use pagination later, but even so, not in the DOM all the time.)
This means that I have to be able to ADD when clicking a row, and when clicking the same or another REMOVE from the previously clicked.
EDIT
New updated JSFiddle.
The requirement was to not fill the DOM with all second level tables and I came up with a solution for it.
First I tried creating a custom directive and I got it to insert a row at the right place (beneath the clicked row) and created a second level table with headers but could not get it to populate with rows using ng-repeat.
Since I could not find a solution that worked fully I went back to what I already had created, with ng-show and sought a solution like it...and there exist one.
Instead of using ng-show/ng-hide, Angular has a directive called ng-switch.
In level one
<tbody data-ng-repeat="storedata in storeDataModel.storedata"
data-ng-switch on="dayDataCollapse[$index]">
...and then in the second level, i.e. the second tr
<tr data-ng-switch-when="true">
, in which you have the second level ng-repeat.
Here's a new JSFiddle.
Inspect elements, and you will see that there is a comment placeholder for each "collapsed" level 2 table.
UPDATE (2014-09-29)
Upon request of also expanding/collapsing level 3, here's a new JSFIDDLE.
NOTE! - This solution have all information in the DOM at all times, i.e. not as the earlier solution, which only added a notation for where the information should be added upon request.
(I can't take credit of this one though, since my friend Axel forked mine and then added the functionality.)
I think that a better solution is to use the ng-repeat-start and ng-repeat-end directives on the tr elements rather than using the ng-repeat on the tbody (this case doesn't justify more than a single tbody).
Have a look here:
PLNKR
<tr ng-repeat-start="person in people">
<td>
<button ng-if="person.expanded" ng-click="person.expanded = false"></button>
<button ng-if="!person.expanded" ng-click="person.expanded = true"></button>
</td>
<td>{{person.name}}</td>
<td>{{person.gender}}</td>
</tr>
<tr ng-if="person.expanded" ng-repeat-end="">
<td colspan="3">{{person.details}}</td>
</tr>
I don't have enough reputation yet to comment, so I'm following up in an answer with an additional functionality issue I have come across. I used Pixic's structure successfully as I really like that the DOM is not polluted with the second level data/tables until they are viewed and it is all working perfectly.
Until I was asked to allow dynamic sorting of the top level table. No problem - I can sort the top level table. The problem is I have been unable to come up with a way to keep the second level table (ie hidden ) synced up and "moving" with the sort of the top level table. This is a display only issue. The underlying data is properly associated with the top level, but the display is messed up as it displays the original "indexed" row as the second level tables don't re-sort with the parent row.
The only thing I can come up with is dynamically inserting the second level html from the controller upon expanding a row, but wondering if anyone else had any other ideas. I tried ng-repeat-start and ng-repeat-end (on a hidden third tr tag to include all elements thinking that should keep all items in the tbody together, and on a hidden tbody), but that didn't work.
Edit:
As requested, I have started another question: Multi-level tables (inside another if clicked) and Dynamic Sorting of Top Level Table