Method called after page rendering

Unfortunately, there is no method that runs after everything on a page  is rendered. Please consider investigating the element that you need to use and find the way to process it after appearing.

Eugene Podkovka,

Ok, thanks for the info. Follow up question - is it fine to do something like in the code snippet below or do you think it's possible that afterRenderMethod will be called when DOM tree is not ready yet? Are parts of pages rendered after AJAX for example?

onRender: function() {
	this.callParent(arguments);
	setTimeout(afterRenderMethod);
}

Dear Carlos,

I would rather recommend using following events to listen for page load: DOMContentLoaded or load:

http://javascript.info/onload-ondomcontentloaded

Also,  as for your code snippet, you can achieve your goal in such way. Though, please keep in mind, that you trigger the function not based on the last element rendered, but approximate time of timeout function taken to fully render the page. Give it around 10 seconds for the timeout, so to make sure all elements have rendered.

Regards,

Anastasia

Anastasia Botezat,

Hi Anastasia,

Have the same problem here, can you show me how to use DOMContentLoaded or load in BPM client side code

Thanks

Dear Fulgen,



First of all, if your page is based on some entity, we highly recommend to use onEntityInitialized method

onEntityInitialized: function() {
    this.callParent(arguments);
    // some code
},

This method is guaranteed that not all the HTML is already loaded, but all the data is loaded to the inputs too.

In case your card is not based on the entity, and don't have onEntityInitialized method running, please use the http://javascript.info/onload-ondomcontentloaded approach provided, by writing this subscription in the init method. Something like that:

....methods block...
 
init: function() {
    this.callParent(arguments);
    document.addEventListener("DOMContentLoaded", this.htmlLoadedCallBackMethod);
},
 
htmlLoadedCallBackMethod: function() {
   alert("html loaded");
// some code here
}

Regards,

Anastasia

Dear Anastasia,

Curiously, i have tried to get "ServicePact" lookup value just calling a simple function doing : 



        methods: {

            onEntityInitialized: function() {

                this.callParent(arguments);

                this.getSlaExpertCenterId();

                document.addEventListener("DOMContentLoaded",         this.getSlaExpertCenterId());

            },

......

            getSlaExpertCenterId: function() {

                console.log(this.get("ServicePact"))

            }    

In each cases, console returns me "undefined"

But as you can see in picture below the input field is filled in...

Dear Maxime,

The reason you are getting undefined is that you haven't saved the record. In this case you have no record in the DB and SLA respectively.

Please add validation to check for empty SLA field and run your custom method in case you have SLA indicated.

If you would open already existing record, you would see the following in the browser console:

Regards,

Anastasia

Anastasia Botezat,

Ok, i still dont understand why the ServicePact is filled and we cant get is value.

Anastasia Botezat,

Hi Anastasia, I am facing the same issue, however, even when adding the listener to the init function, I am not getting my function to be called. Any thoughts?

Thanks.

Maxime.o,

In the example above in the screenshot I am retrieving ServicePact from already existing record. When you open a new record onEntityInitialized method runs, triggers getSLlaExpertCenterId, which tries to get ServicePact from non-existing record. The code you shared above works fine for existing records.

Danilo Lage,

It is hard to tell what exactly goes wrong without seeing the schema code itself. Please consider debugging step-bu-step your code using the developers console of your browser. There you can spot the call stack and determine where function goes wrong way.

If you will have difficulties, please share the full page code.

Anastasia Botezat,

 

 This function,

document.addEventListener("DOMContentLoaded", this.htmlLoadedCallBackMethod);

able to call from onEntityInitialized. When I am trying to call the same function in  "onRender function" (Activity Section Page) it's not been called.

How to call this function in the onRender function ?

Any ideas or thoughts over it.



Regards,

Adharsh S

Adharsh,

please specify your business task and also please tell us why you cannot use the base onRender or onEntityInitialized so to achieve it and need to use DOMContentLoaded additionally.

Thank you in advance!

Best regards,

Oscar

Oscar Dylan,

It appears the technique is to initialise a variable to a lookup value using an entity schema query during the 'onEntityInitialized' call and following that when the lookup value is changed 'this.get("LookupName")' returns an object with the 'Id' (the 'value' property) and 'Name' ('displayValue' property) values of the lookup.

For example, querying a Case object record for the initial Contact lookup value and the initial UstSubCategory lookup value:

            onEntityInitialized: function(){
                this.callParent(arguments);
                this.getSubCategoryAndContact();
            },

            getSubCategoryAndContact: function() {
				var esq = Ext.create("Terrasoft.EntitySchemaQuery", {
				    rootSchemaName: "Case"
				});
				esq.addColumn("UsrSubCategory");
				esq.addColumn("Contact");
                window.console.log("Case Id: " + this.get("Id"));
				esq.getEntity(this.get("Id"), function (result) {
				    if (result.success) {
				        this.set("PreviousSubCategory", result.entity.values.UsrSubCategory);
				        this.set("PreviousContact", result.entity.values.Contact);
						window.console.log("result.entity.values.UsrSubCategory: " + JSON.stringify(result.entity.values.UsrSubCategory));
						window.console.log("result.entity.values.Contact: " + JSON.stringify(result.entity.values.Contact));
					}
					else {
						throw new Error("System error, unable to read 'Case' data, function 'getSubCategoryAndContact'");
					}
				}, this);
            },

After this initial code has run when the page has loaded, when the value of a lookup changes, you can then retrieve the value with 'this.get("LookupName")', for example:

		attributes: {
			"FieldChange": {
    			dependencies: [{
      				columns: ["UsrSubCategory", "Contact"],
      				methodName: "onFieldChange"
    			}]
			}

			onFieldChange: function() {
				window.console.log("In function 'onFieldChange'.");
				const field = arguments[1];
				window.console.log("'field'. " + field);
				switch (field) {
					case "UsrSubCategory":
						window.console.log("'UsrSubCategory': " +  JSON.stringify(this.get("UsrSubCategory")));
						break;
					case "Contact":
						window.console.log("Contact: " + JSON.stringify(this.get("Contact")));
						break;
					default:
						throw new Error("System error, non valid value for 'field', function 'onFieldChange'.");
				}
			},

Ref. Triggering a Client-Side Event When a Field is Changed on a Page in Creatio (formerly bpm’online)