In icCube Reporting V6, I created a template widget based on iccube's example at https://www.iccube.com/your-first-html-widget/. So doing, i've put all the JS code in the After render event.
I'd like to have some variables defined and defaulted at widget creation time which could be changed during the use of the whole report and be used as parameters in this widget.
The problem is that at each data change, the widget is fully refreshed and reconstructed, Resetting my variables to default as well...
Is it missing a init widget event in which we could initialize the widget and the variables ? then the on Data Received and After render events would just be aimed to manage data manipulations and rendering ? (with regard to these variables)
Or… am I just doing it a wrong way ?
After Render Event is called everytime we get new data or one of the property of the widget has change. The latest is rare but possible if some of the properties have been defined using an event.
What we need is to add a status on this method to check if the widget has been already rendered. This can be done in two way, checking with jquery for the dom has changed or adding a javascript object.
The first one is easy with jquery and should be use if there is no need to cache javascript object. For the second one we've two solutions :
1) We can use jquery to bind a javascript object to a html element ( data ) :
var state = $node.data("widgetState");
if ( state ) {
// it's not the first time
state.times = state.times+1;
$node.html("It's the " + state.times + " time you clicked " );
}
else
{
// it's the first time
$node.html("It's the first time you clicked, don't be shy" );
state = { times : 1 } ;
$node.data("widgetState", state);
}
2) Since icCube 6.0.4 you can also use the context to get a local state object, context.widgetState()
You can check a working example here :
Related
I'm making a web app with Angular however I'm having trouble with the load button. So the user presses the load button, selects a save to load, and a new set of properties is loaded into forms that each constitute a step-item in a stepper. The forms array that loads all of the forms is 'reset' with this function:
private resetPropForms(): void {
this.propForms = [];
}
This is the function that receives as an argument a properties event and then sets the forms array:
onPropertiesEmitted(properties: Property[]): void {
this.resetPropForms();
this.resetDividedProperties();
this.resetUndividedProperties();
this.setDividedProperties( properties );
this.setForms();
this.setUndividedProperties( properties );
}
And this is what my template looks like:
<se-stepper
*ngIf="undividedProperties"
[linearMode]="false"
[(activeStepIndex)]="activeStepIndex"
>
<se-step-item
*ngFor="let form of propForms"
>
<app-properties-form
[propertiesForm]="form"
(change)="onPropertiesChanged($event)"
>
</app-properties-form>
</se-step-item>
</se-stepper>
Lastly, the view is updated but only after I go to the next step and come back. And if I save the properties then the correct value is sent to the backend even though the value displayed in the view is incorrect/not updated. Any ideas why this is happening. I tried using trackBy with a unique identifier for each form ( using a random number ) but that didn't work. I tried using ChangesRef and detectChanges() and that didn't work. When I leave out the *ngFor and just display the first form in the array it updates properly so that leads me to believe that this problem has something to do with the *ngFor.
edit:I'm pretty sure setTimeout() placed in onPropertiesEmitted() worked but I forgot where I put it to make it work and it seemed like a not-so-great solution to the problem
I Think the problem is that the array is the same and change detect won't detect changes, try this
private resetPropForms(): void {
//this.propForms = [];
//array.slice() returns new array
this.propForms = this.propForms.slice(0,0);
}
You could also reset the form before assigning new properties ( form.reset() )
I am trying to get Knockout and a Bootstrap-TreeView to work together.
(The component: https://github.com/jonmiles/bootstrap-treeview)
At the moment, I'm passing the JSON from an API call to the constructor of the View Model. This will change later but for simplicity, I'm doing this.
What I need then is to bind click events to each node. So if I click the root node, nothing happens, click a folder, and I can get a list of all it's direct child text values (Just alert them for now), and if I click a file node, I alert the 'data' value from that node.
Here's a fiddle to see what I have done so far.
https://jsfiddle.net/Cralis/h15n2tp7/
My View Model simply initialises with the json data. And then a computed in the view model does the setup of the Tree View.
// Create the View Model.
var ViewModel = function(jsonData) {
var self = this;
self.MyData = ko.observable(jsonData);
ko.computed(function() {
$('#tree').treeview({
data: self.MyData()
})
.on('nodeSelected', function(event, data) {
if (data.nodeLevel == 2) { // Are we clicking a File?
alert("Clicked a File. Data: " + data.data)
}
else
if(data.nodeLevel == 1) { // We're clicking a folder.
alert("Clicked a folder. Would like to somehow alert a list of all child node text values.")
}
});
})
}
// Create the View Model and initialise with initial data
var vm = new ViewModel(getTree());
// Bind.
ko.applyBindings(vm, document.getElementById("bindSection"));
This works, but I don't think I'm using Knockout much. That's because my click events are in my javascript, and my Knockout view model doesn't really have any control.
How can I allow Knockout to 'see' the click events. So, onclick of a node, a knockout computed (I think?) fires and I can then control the UI based on bind events.
Outside of this, I have a DIV which shows a list of files. What I was was that when a folder level node gets selected, I can populate that div with all the 'text' values from the children of that selected folder node.
Any pointers in how I can achieve this would be amazing. I'm just not sure how I can get data-bind="click... to the nodes, which can then run the code that's currently in the 'onclick' in my fiddle.
I've updated your fiddle with a custom binding: https://jsfiddle.net/h15n2tp7/2/
As I already posted here in this question: add-data-bind-property-to-a...
I think this is the best way do it. The problem here is the synchronization between 1) fetching JSON 2) applying bindings 3) creating DOM elements. Creating custom binding lets you do that easily without much of messy code. In your case, when a getTree function is done via $.get, you need to create a view model in .done function, and apply bindings after that. So the provided fiddle will change a bit, but the idea is the same. Note, that you don't need any observables (if the tree data does not change while the app is running). If it does change though, make sure that you implement update function in a custom binding (knockout custom binding reference).
I'm very new to AEM and pure front end (html,css,js) so apologies for asking such a basic question. I have made 2 components parent and child. Each one of these components has a name property which I set in the dialog. I need to to be able to access the parents name property in the child component my page looks like this.
Parent Component
--parentParsys
----Child Component
------childParsys
I just need to display the parents name in the childs dialog but I can't seem to find the parents name.
Any guidance would be much appreciated. Ideally I'd like to do this in JS but I'm comfortable picking my way around a JSP.
Thanks
Attach a listener to your child component's dialog so that it will run your JavaScript when the dialog loads. That JavaScript will determine the path of the parent component based on the path of the child component. Using Apache Sling's RESTful nature, you will simply make a GET request to parent component's Resource, which will return you the properties of that resource. You can then update the current open dialog with the value that you want. All the information you need is provided in the CQ Widgets API documentation.
Attach the listener to your child dialog pointing to an external JavaScript file:
<instructions
jcr:primaryType="cq:Widget"
fieldLabel="Instructions"
xtype="displayfield">
<listeners
jcr:primaryType="nt:unstructured"
loadcontent="function(field, record, path){ mynamespace.updateWithParentName(field, record, path) }"
/>
</instructions>
Add the custom JavaScript to a ClientLib available in authoring mode. That could be cq.authoring.editor, see Using Client-Side Libraries. This will run every time the dialog opens. This example makes a synchronous GET request and updates a displayfield. You will update it depending on what you want to with the data, how you want to find the parent component, and you'll also want to add null checks.
var mynamespace = {};
mynamespace.updateWithParentName = function(field, record, path) {
var parentPath = getParentPath(path);
var parentComponent = CQ.shared.HTTP.eval(CQ.shared.HTTP.noCaching(parentPath + '.json'));
var parentName = parentComponent.name; // assuming the property name is "name"
field.setValue('Parent component name is: ' + parentName);
/* Go up two levels accounting for the current component and the parsys */
function getParentPath(path) {
var parts = path.split('/');
var parentPath = parts.slice(0, parts.length - 2).join('/');
return parentPath;
}
}
I am trying to append a view to an item in Backbone with a following code:
var viewContainer = this.$el.find('.view-container'),
pageWrap = this.$el.nextAll();
FIX
if (viewContainer.empty()) {
this.myView= new ProductsView();
viewContainer.append(application.myView.render().$el),
console.log(myView);
}
I am appending this view to the viewContainer with a toggle function, however, every time I click on the button, myView is appended again and again to the viewContainer instead of of only once. How do I check if the view is already rendered inside it before appending it? Is there a !this.rendered() equivalent I can use?
I found this thread but it is not helping me in this instance.
UPDATE - FROM console.log(viewContainer)
[div.view-container.product-container.active, div#subjects_menu.view-container.product-container.hidden.active, prevObject: p.fn.p.init[1], context: undefined, selector: ".view-container"]
From the looks of it, you want to make sure ProductsView is not created if it already exists.
Simplest way to do this would be:
if(!this.myView) {
this.myView= new ProductsView();
viewContainer.append(application.myView.render().$el),
}
It is better to work with application state than querying DOM. When you remove product view, simply do this.myView = null afterwards.
The only time you'd want to query DOM to know if a view is rendered is probably when you have to integrate an isolated external application over which you have no control that doesn't trigger any event/provide callbacks etc while rendering.
First of all I know how to set a LoadingMask for a component but have a problem with the uncoupling of the system I am making so I am just looking for a hint/idea.
I am using a MVVC architecture and in the View I have a Container with several Components in it, one of which is a Grid.Panel. The grid is bound to a store and has an event that when fired calls a method of the store. The following code happens in the ViewController:
functionForEvent() {
var store = getStoreForThisGrid();
store.update(Ext.getBody());
}
What happens now is the update() method makes a request to a server, that updates the store itself and the view component, and I need the loading mask during that time. How I handle the situation right now is I pass Ext.getBody() (or a DOM Element representation of a specific component) to the method and it deals with that reference. This function part of the store that is attached to the Grid and resides in the Store:
update : function (el) {
el.mask();
makeRequest();
el.unmask();
}
What I am looking for is another way (Pattern maybe if such exists for JavaScript) to access the View component from the Store instead of passing it around because that does not seem like a good practice and couples the system.
Since I come from a Java background I would have used the Observer pattern but cannot find how to apply this in JS.