Hello,

i made a module, in freedom-ui mode, to display custom content in Accounts_FormPage. The module init is triggered with crt.HandleViewModelInitRequest handler.



here is the useful module code :

/* AMD module declaration. */
// jshint esversion: 11
define("UsrAccountHistoriqueProduit", ["@creatio-devkit/common"], function(sdk) {
    //
    return {
        //**--------------------------------- Init module -------------------------------**/
        onInitialized: async function($context) {
            const idAccount = await $context.Id;
            const my = this;
            
            /* Declare the class. */
            class UsrAccountHistoriqueProduit extends HTMLElement  {
                constructor(args) {
                    super();
                    this.displaycontent();
                }
                async displaycontent() {
                    var shadowDom = this.attachShadow({mode: 'open'});
                    shadowDom.innerHTML = "";
                    
                    const html = await my.statsOrderProduct(idAccount);
                    shadowDom.innerHTML = html;        
                }
            }

            /* Register the component. */
            customElements.define('usr-historiqueproduit-view-element', UsrAccountHistoriqueProduit);

            /* Register the web component as a view element. */
            sdk.registerViewElement({
                type: 'usr.CustomViewElement',
                selector: 'usr-historiqueproduit-view-element'
            });

        },
...

It works fine at load of the page, then when viewing a second account, i have this error message : 

ERROR DOMException: Failed to execute 'define' on 'CustomElementRegistry':
the name "usr-historiqueproduit-view-element" has already been used with this registry



i think i can clean up the registered viewElement with the crt.HandleViewModelDestroyRequest handler, but i did not found cleaning method in the sdk objet.

 

How should it be done please ?

 

best regards,

Patrice

Like 0

Like

2 comments
Best reply

Hi Patrice,

 

This error message occurs since the element with "usr-historiqueproduit-view-element" selector was already registered upon first init:

sdk.registerViewElement({
                type: 'usr.CustomViewElement',
                selector: 'usr-historiqueproduit-view-element'
            });

In your onEnityInitialized you need to add additional check if the element was registered in DOM or not (for example as proposed here) and as a result of this check perform registration or not.

Hi Patrice,

 

This error message occurs since the element with "usr-historiqueproduit-view-element" selector was already registered upon first init:

sdk.registerViewElement({
                type: 'usr.CustomViewElement',
                selector: 'usr-historiqueproduit-view-element'
            });

In your onEnityInitialized you need to add additional check if the element was registered in DOM or not (for example as proposed here) and as a result of this check perform registration or not.

Thanks Oleg,

i was not aware of the CustomElementRegistry api, i thaught it was a Creatio thing.

Now i know where the documentation is ! (mozilla.org)

 

Best regards,

Patrice

Show all comments

Good day, Colleagues!

Does anyone possibly have a code example on the new Freedom page showing how to calculate the difference of values ​​of two page fields and write it into a third field? For example: payment balance = Amount-PaymentAmount Maybe there's also a code example on how to get the exchange rate on the date specified in the Date field according to the Currency field or an example of how to refer to another object to get a value from it.

Like 2

Like

3 comments

You can see how to wire up a code to respond to a field change here:

https://customerfx.com/article/responding-to-an-event-when-a-field-is-c…

As far as getting and setting the values, this article will show you how to do that: 

https://customerfx.com/article/reading-and-setting-field-values-via-cod…

Ryan

Ryan Farley,



Thank you, I will give it a try.

Ryan Farley,

 

How can I achieve the same requiremet, but for the fields that are inside a detail with editable list?

 

Thank you in advance.

 

Best Regards,

Pedro Pinheiro

 

 

Show all comments

Hi Team,

We have an issue when installing packages in the production environment some js files (Client module) and business Rules are not updated with new fields.

we make an overwrite page and section file properly in the custom package but the issue is only in production can't see new fields and business Rules in page and in js file



also we perform a compile all & Generate for all schemas but still same issue

Like 0

Like

2 comments

Hello,



Could you please elaborate on the issue? 



Are transferring modifications between environments by packages? 

Is it working properly on the website where it was developed?

Bogdan,

Hi  Bogdan, Thanks for reply 

Yes transferring modifications between environments by packages and it is work successfully on my development environment

Show all comments

I need to make it open a panel with Open Street Map on it but my code is not working, when I click on the button I added, it gets the loading screen but doesn't show anything and the console shows an error.

My Code:

{
    showMapContainer: function() {
		var mapsConfig = {
			mapsData: []
		};
 
		mapsConfig.mapsData.push(
			{
				address: "0.0, 0.0",
				content:"<h2>Check-In</h2>",
				gpsE: "0.0",
				gpsN: "0.0",
				isCoordsItem: true,
				useCurrentUserLocation: true
			}
		);
		MapsUtilities.open({
			mapsConfig: mapsConfig,
			scope: this
		});
	}
}

Error:

Like 1

Like

1 comments
Best reply

I solved it, I needed to add the GetMapsConfig in messages:

I solved it, I needed to add the GetMapsConfig in messages:

Show all comments

Hello,



I would like create multiple buttons that call a business process. Due to the number of buttons in my page, I would like to create a single button click method. This method would receive a parameter that would tell it which button was called. The parameter would then determine which field would be read.



My button method should look something like this:

 onButtonClick: function(clickedButton){
				var recordId = this.get("Id");
                var readField = "Error"; //This value should change later, will show error otherwise
 
                switch(clickedButton){
                    case "Button1":
                        readField = this.get("Field1");
                        break;
                    case "Button2":
                        readField = this.get("Field2");
                        break;
                    /*More Cases
                    .
                    .
                    .
                    */
                   default:
                    console.log(readField);
                    break;
                }
 
                var config = {
                    sysProcessName: "UsrBpToCall",
                	parameters: {
						CurrentRecordId: recordId,
						ReadField: readField,
 
					}
				};
                ProcessModuleUtilities.executeProcess(config);
}

I assume the parameter would appear in the diff section, but I do not know how to implement this functionality.



I appreciate your help!

 

Kind Regards,

Firas



 

Like 1

Like

3 comments
Best reply

Hello Firas,

If you add a tag to each button it will get passed as the fourth parameter to the click handler. 

For example:

{
	"operation": "insert",
	"parentName": "Detail",
	"propertyName": "tools",
	"name": "MyButton1",
	"values": {
		"itemType": Terrasoft.ViewItemType.BUTTON,
		"caption": "Send selected invoice",
		"click": {"bindTo": "onMyButtonClick"},
		"tag": "MyButton1"
	}
}

Then you can retrieve the tag in the click function handler like this: 

onMyButtonClick: function(p1, p2, p3, tag) {
    console.log(tag);
}

Ryan

Hello Firas,

If you add a tag to each button it will get passed as the fourth parameter to the click handler. 

For example:

{
	"operation": "insert",
	"parentName": "Detail",
	"propertyName": "tools",
	"name": "MyButton1",
	"values": {
		"itemType": Terrasoft.ViewItemType.BUTTON,
		"caption": "Send selected invoice",
		"click": {"bindTo": "onMyButtonClick"},
		"tag": "MyButton1"
	}
}

Then you can retrieve the tag in the click function handler like this: 

onMyButtonClick: function(p1, p2, p3, tag) {
    console.log(tag);
}

Ryan

Ryan Farley,



the solution works perfectly. Thank you.



I have a follow-up question if you do not mind. Does the tag being passed as the fourth argument mean that button click methods can take up to 4 arguments?  If that is the case how can one proceed if they were to pass more than one argument and populate p1 through p3? 



Thank you again, your Community responses and articles have been very helpful.



Firas

Hello,

 

Not sure about passing 4 arguments to the click event, I've been using the tag property only to pass the parameter needed. In your case you can bind the click-handler method to several buttons and specify different tags for it so the click-handler method could understand what to do according to the button tag.

Show all comments

Hi everyone, 

 

I would like to add my Cases (with certain filters) as an additional tab in Agent Desktop.

https://prnt.sc/pcrw94

 

The current tab "CASES" comes from the Queue section.

 

Thank you in advance!

Like 0

Like

4 comments

Please create a new detail based on the Case object via Detail wizard. The article on the academy will be helpful for that:

 https://academy.bpmonline.com/documents/technic-sdk/7-14/creating-detail-wizards

Add a new tab and add the newly created detail to the tab via Section wizard. There is an opportunity to add filter to the detail via JS development. Please find the example in the article by the link below: 

https://community.bpmonline.com/articles/filtering-details-several-fields

Alina Kazmirchuk,

Hi Alina,



Thank you for your reply, it has given me an idea of how I can populate the tab once it's there. The problem however is that I cannot add a new tab. 

The only visible option is changing the fields to display https://prnt.sc/pcxsnw , it seems like the tabs are created in a very unique way. 

Yosef,

The related topic was discussed in the post by the link below: 

https://community.bpmonline.com/articles/agent-desktop-group-queue-items-queue-instead-entity

Alina Kazmirchuk,

Thanks again for the reply but it does not achieve what I want.

I want to create a new tab based on the *case Section*.



Another example to clarify my goal is to have a second tab that contains all the accounts. It has nothing to do with queues. (this is not my goal, this is an example)

If we look at the code from the link you send me we can see that "Queues" is being used: 

var esq = Ext.create("Terrasoft.EntitySchemaQuery", {rootSchemaName: "Queue"});

I am trying to avoid this. 

 

Hopefully this clarifies my goal.

Show all comments

Hi

I'm developing a custom widget for bpm'online Account page using custom UI Component.

The library is available via CDN or local file and depends on jquery.

How should I reference it?

Thank you

Like 0

Like

10 comments

Dear Mohamed,

You just need to create a new module in the configuration, use define to declare it and copy the library text. I advise you to see how jQuery is connected in the configuration (the module is called the same).

Regards,

Anastasia

It works! Thank you.

Anastasia Botezat, Mohamed Ouederni

Hello. I could only find a jQuery migrate script included as a module and not jQuery. Can you help me find how jQuery is included as a script??

M Shrikanth,

 

jQuery was deleted from the configurations as a script in the latest versions and you need to call the jQuery.getScript function in the console and review the sources tab to find the schema content

 

Best regards,

Oscar

Oscar Dylan,

Hi Oscar. Thanks for your reply. So can we replicate how 'jQuery migrate' was included to include any other external libraries? Any other examples I can look at in Configuration?

M Shrikanth,

 

Please call jQuery.getScript function in the console and review the sources tab as I recommended and use it as an example to add your own jQuery to the system.

 

Best regards,

Oscar

Hello! I've run into a similar problem, I would like to include libphonenumber-js and use it in my client code. The library is also available via a CDN. I'm not sure how I can integrate the library, the source code of jQuery.getScript didn't really help. Any advice would be appreciated.

 

Kind regards

Kai

Kai Wilker,

 

Can you please specify if you get any errors with calling jQuery.getScript function?

This is basically the easiest way to do that,

 

Thank you!

Bogdan Spasibov,

 

yes, there are error messages once I call the getScript function, see attached screenshot.

Hi Anastasia,

 

Do you have any existing example of a module calling external js library?

Show all comments