Just looking at the live example code on the jsViews site:
https://www.jsviews.com/#jsvfortag#jsvsortfilterrange
If I modify this line to include a sort:
{^{for members sort='name' start=start-1 end=end}}
The array does not re-sort after observably adding an item to it.
$.observable(team.members).insert(0, {name: "zzz this should be last"})
Any ideas how to trigger the sort after an item is inserted?
The sorting does refresh when there is an array change event. Putting sort='name' will re-sort if you click on [Add], or on [x] to delete an item. But what you want it is to trigger a re-sort whenever you change the name property in an item.
But you don't want it to re-sort on character entry, so the first thing is to set:
<input data-link="name trigger=false" />
See docs here for the trigger setting (done above as local override of the global setting).
Next you can declaratively make your list of items depend on the name text on each of the items, by writing
{^{for members sort='name' depends='members.[]^name'}}
The depends='members.[]^name' feature has very little documentation, but is a wild card for responding to individual property changes (here, the name property) on any item in the array.
See https://www.jsviews.com/#samples/sort-filter#jsv-for for a sample which uses it.
You could also do depends='members.[]^*' for responding to changes on any array item property.
And depends='members.**' will work too, for listening to any change at all under the members array (See the docs here)
Here is a working sample which uses the depends='members.[]^name' approach above:
https://jsfiddle.net/BorisMoore/b51tu27n/
Related
I have created a regex lookup table variable to output text based on the Click Element containing a specific string. However, the variable appears as null despite the string definitely being in the Click Element. Can anyone help?
Here is my regex lookup table variable
Here is the debug window showing null (the Action field is where the regex table variable should populate)
Here is the full tag that contains the variable
Here is the trigger for the tag
I have tried various different strings from the Click Element, without luck.
The trigger for the tag is based on the same string, and the trigger works, which only adds to my confusion.
I feel like the problem must be obvious, but I'm at a loss.
I struggled with this as well until I realized that "Click Element" is actually an object, not a string. It's based on gtm.element in the datalayer.
So, in order to do this you'll need to create a custom datalayer variable that more accurately targets a specific child key.
To see what I mean, open a link in a new tab and then type in datalayer into your browser console, and press enter. You'll see something like:
3:
event: "gtm.click"
gtm.element: a#mylinkclass.my-class.something.else
accessKey: ""
ariaAtomic: null
ariaAutoComplete: null
ariaBusy: null
ariaChecked: null
ariaColCount: null
ariaColIndex: null
etc....
Screenshot of chrome inspector console showing datalayer children
So, then you'll have to create custom variable to target the key you'd like. For example, a datalayer variable that you create with gtm.element.className would return my-class something else for link Link Text.
Using this method I was able to create a Regex lookup table just like you're trying to do.
Here's a post that goes into some more detail on some of the above:
https://www.analyticsmania.com/post/click-element-variable-in-google-tag-manager/
In App Maker, what is the simplest way to achieve the same result with a dropdown box that you can with a suggest box, which can return the whole record when you make a selection giving you the ability to assign associated record values to other fields on the page?
Consider a data model with three fields, (Code, Description, and Severity). Add a dropdown box to select the Code. Have the selection, (probably using onValueChange or onValueEdit), write the selected Code's Description to a label field beside the dropdown box. The Code's Severity will also be used to affect the style in some way like background color or something, but for this answer, merely assigning the value to a scripting variable will be good enough. It's the record value access and assignment mechanism I am after.
Clarification: This data model will not be the page's datasource. It is a secondary reference table used for assigning a code to a ticket. You can also assume that a record value will be written to a field in the page's datasource as well.
I would appreciate the simplest low code solution as we will have non-programmers attempting this. Thanks.
As long as you leave your value binding on the dropdown blank the following should work:
Set the options binding to:
#datasources.YourDatasource.items
You may want to consider changing the 'Names' binding to be the projection of a particular field in this datasource otherwise the values showing in your dropdown will only be the 'keys' from this datasource.
Then in your onValueEdit event you will gain access to individual fields like this:
var item = widget.datasource.item;
item.YourFieldToEdit1 = newValue.YourOtherDatasourceField1;
item.YourFieldToEdit2 = newValue.YourOtherDatasourceField2;
That would probably be the simplest way.
I have a data grid which populates data from Firebase Cloudstore (sorted according to lastUpdated date from Firebase), when I edit the row I have modal dialog where I can edit the information, when save the entry I set the lastUpdated to sysdate. Editing works fine (and the timestamp is updated) but it picks the wrong row from the table. In the table I have a column which is the documentId from Firebase. To verify that it picks the wrong documentId I then console log the documentId which is passed to the edit method and it is not the same as the one on the row that I pick for editing in the view.
My code is exactly like the below code (taken from clarity documentation). What am I doing wrong ?
<clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
<clr-dg-action-overflow>
<button class="action-item" (click)="onEdit(user)">Edit</button>
<button class="action-item" (click)="onDelete(user)">Delete</button>
</clr-dg-action-overflow>
<-- ... -->
</clr-dg-row>
You've got a few structure issues here.
First, the modals should be top level and not inside of the Datagrid. Basically, it is causing the last defined modal (of the same clrModalOpen binding) to be displayed and never the others.
Second, clicking on a record is not passing or setting any state about which row you are selecting. So your form has no knowledge of which row is being edited and your model is undefined.
The reason your modal would output the connection.id was you defined it inline of the datagrid rows itself, where the connection local variable was present. However, you'll have to pass it around to the modal since it must live outside of the datagrid itself.
See https://stackblitz.com/edit/angular-azbaxr?file=src%2Fapp%2Fapp.component.html
I would like to have the user enter order items on my order form as a table where they input the Qty and Prod #. I've not programmed with that type of field so a blank line would initially display for a new order. They would type a Qty and an item number in the fields and hit enter. When they hit enter from either field, what do I program to check the validity of the two fields. Plus I need the item number to be a drop down/type ahead field. Does anyone have an example of this type of thing they could send me? It would be looking at a view in the product catalog db. Also, after they enter an item to order, that "doc" should get stored/saved and a new blank line should open up.
What type of control do I need to use and should these items be stored in their own form or on the main order document? Could use some guidance here. Thanks.
The question you have is a little broad but I will make a couple suggestions if I can.
You have the main order doc. Then a repeat control with each item. Filter each item by a uniqueID that allows you to join the main doc to the child docs. Each item should be a separate document. You then need to make the items in the repeat control editable.
There is a lot of things going on here and I think you need to get started somewhere. I think the first step is to do a repeat control with response documents.Xpages, Inherited documents in view panel by using #Unique
I'm trying to generate unique id for label & input pairs.
After googling I now know that, unlike with handlebars, there is no array #index syntax extension in spacebars yet (also anybody knows why Blaze development has been inactive since the version 0.1 for past 5 months?).
So I ended up using the JS Array .map() solution inspired by this blog post and other posts. However, this solution returns label & input pairs of objects which DOM appears to be rendering the same on 'pagination' through Session.
Live example: http://meteorpad.com/pad/NXLtGXXD4yhYr9LHC
When clicking on first set of "Non-Indexed IDs" checkboxes, then next/previous, DOM will display new set of checkboxes correctly.
However clicking on the second set of "Indexed IDs" checkboxes below, then next/previous, DOM seems to retain the same checkboxes because one selected from the previous page remains checked on the next page.
What am I doing wrong or missing?
I also put the code on github for quick testing & refinement:
The solution, which I've found by looking at the ObserveSequence source, appears to be to give your generated objects a unique field called _id (generated like {{questionId}}:{{questionIndex}}:{{choiceIndex}}). See this meteorpad: http://meteorpad.com/pad/2EaLh8ZJncnqyejSr
I don't know enough about Meteor internals to say why, but this comment seems relevant:
// 'lastSeqArray' contains the previous value of the sequence
// we're observing. It is an array of objects with '_id' and
// 'item' fields. 'item' is the element in the array, or the
// document in the cursor.
//
// '_id' is whichever of the following is relevant, unless it has
// already appeared -- in which case it's randomly generated.
//
// * if 'item' is an object:
// * an '_id' field, if present
// * otherwise, the index in the array
//
// * if 'item' is a number or string, use that value
//
// XXX this can be generalized by allowing {{#each}} to accept a
// general 'key' argument which could be a function, a dotted
// field name, or the special #index value.
When the _id is absent, it uses the index in the array, so I guess ObserveSequence assumes it's the same object with changed fields, rather than a different object, so it re-uses the old elements rather than destroying them and recreating them. I suppose the name _id is chosen so that it works well with arrays generated by .fetch() on a Minimongo cursor.
I don't know if this is documented behaviour, or if it might change in the future.