Lets assume I have created my own custom view for a Link content type. When the user adds a 2sxc Content app to a Pane, then picks the Content Type (Link) then my custom View, when it first starts up, how can I detect that a) the View does not use a Demo item vs. b) the View uses a demo item and is showing the Demo item vs. c) its not the first time and there is a real user added Content (Entity) in place?
I have done stuff like this for the a) case:
var link = AsDynamic(Data["Default"]).First();
then checked if it was null, but it looks like my View code never executes and instead I just see, "No demo item exists for the selected template."
If I do assign a demo, is there a more elegant way to know that the Entity I am handed as Content.First() or Data["Default"]).First() is a Demo item and now a user created Entity? Currently I am hard-coding the EntityId in the template and testing for that.
The template system does not render the template if there is no demo item (unless it's a template without a content-type).
When we need this, we have two ways
give the demo item a unique value in one of the fields and check for that in the template
check the demo-item ID on GUID and check for that (Content.EntityGuid == ...)
IsDemoItem property added in 2sxc 10.06
Dynamic Entity
If a Content Editor "Hides" the only Content Item, the anonymous user will then see a Demo Item where the item was. This is confusing and unexpected from the Content Editor's point of view (as well as the public/anonymous user). If anyone else runs in to it, here is the simple code snippet to add to the start of your view. Basically, if the current user is not logged in and the item to display is a demo item, exit the View w/o displaying anything.
if(!Request.IsAuthenticated) {
if(Content.IsDemoItem ?? false) {
return;
}
}
Best to put it near the start of your first #{} Razor block.
Note: this will not throw an error in 2sxc prior to 10.6.x (because of the "?? false"), but it will not work either.
Related
I am displaying results from json in a react bootstrap table. On clicking compare, the results get filtered within the table. Now I wanted to reload and display the selected products in a different tabular format on clicking "Compare". The page should reload and then only the selected products should display in a table with headers vertically aligned. Can any one please help? Full code here - https://codesandbox.io/s/o4nw18wy8q
Expected output sample on clicking compare -
Probably you need to have a function inside your class to return two different views based the state of your filter status. If the filter status is not true, then display the normal view, if filter status is true, then display the view that you have just mentioned in the above view. As far as the design is concerned, you should be able to work out the table designs.
And when you hit clear, then you should set the filter status back to false
This is not a full working code. I am just giving you some idea.
Here is a codesandbox
https://codesandbox.io/s/2x450x3rqn
You can return a view from the function
onButtonClick = () => {
...
...
return <BootstrapTable
keyField="PartNumber"
selectRow={updatedData}
data={updatedData}
columns={updatedData}
/>
}
I've started investigating admin-on-rest. It works fine for 'flat' REST-endpoints, e.g.:
/posts/
/users/
etc.
But how do I implement nesting? I mean if I click on some post-entry in 'posts' table - I want not the actual post to be opened in a <Show> view, but a list of it's comments (fetched from URL /{postId}/comments)? And I need also to keep the navigation functionality (some back-arrow button or hierarchy in the header to return to previous page).
Is this even possible with admin-or-rest?
If you want to show a list of comments for a post, use the <ReferenceField>. You can see an example in the demo: https://marmelab.com/admin-on-rest-demo/#/customers/77 (click on the "orders" and "reviews" tabs to see an embedded datagrid).
If you want to link to a filtered list of comments from the post list, you'll have to create a custom button component. Once again, you can find an example in the demo: https://github.com/marmelab/admin-on-rest-demo/blob/master/src/segments/LinkToRelatedCustomers.js
I'm trying to get google tag manager to track a couple of different buttons on a site. We're currently unable to change the site to aid with this, so we have to find a solution solely with tag manager.
There are several buttons on the site all with the same format as to the two below.. they all have "submit" as the type and a unique term for value so I'm trying to use the tag manager Form Listener which picks up on type="submit". Is there any variable I can use to pull the value field into my event so I can create individual goals in analytics?
etc etc
Any help is greatly appreciated.
You can use built-in variable "Click Element", then create custom JS-variable:
function(){
try{
return {{element}}.getAttribute("value"); //I am not sure now if it is {{element}} or {{Click Element}}
}catch(err){}
}
This will give you a value attribute of clicked button.
Maybe a useful link by Simo Ahava:
http://www.simoahava.com/analytics/track-form-engagement-with-google-tag-manager/#3
You can use built-in auto-event variable Element Attribute to get value. And be sure to use click tracking and not form tracking, because you want to track button clicks and not form submissions.
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)
I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.
My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.
So, in my footer I have
select id="changePageSize"
And in the grid
events: {
'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}
I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.
What I ended up doing was adding the event listener and function to the backgrid-paginator extension.
Added the select box to the _.template('...
_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');
Under events I added:
'change select.pageSize' : 'changePageSize'
And then created the function:
changePageSize: function(e){
e.preventDefault();
this.collection.state.pageSize = Math.floor(e.currentTarget.value);
this.collection.reset();
},
It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.
Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.
You just need to add:
this.collection.getPage(1); // it will always select first page