FreedomUI
modal dialog
Sales_Creatio_enterprise_edition
8.0

I'm trying to improve a UX flow in one of our clients, and to do so I'm hoping it would be possible to create a modal dialog box which can have a date selected from a date picker, but I can't see any obvious ways - is there anything that can be done for this? I saw this excellent guide on getting a Yes/No type dialog in Freedom UI, but I can't see any extra capabilities for potentially adding more freeform user interaction: https://customerfx.com/article/showing-a-message-dialog-or-confirmation…

 

Any help would be greatly appreciated. Currently on Creatio CRM 8.1.0

Like 0

Like

10 comments
Best reply

Hi Harvey,

I've done this in several areas in our system using modal forms (actually called a Mini Page in the page types dialog you select from when creating a new page). Here's an example of a dialog allowing the case status to be set from a list (we don't use editable lists yet since there's no way to add validators yet to lists):

This is just a modal/mini form created using the form designer. The nice part about this is that it can be bound directly to the object (I have many that aren't bound as well, depending on the scenario).

You can open this specific page for a particular record using this method (also possible with an action in no code designer as well) https://customerfx.com/article/opening-a-record-for-edit-in-a-specific-…

Ryan

Hi Harvey,

I've done this in several areas in our system using modal forms (actually called a Mini Page in the page types dialog you select from when creating a new page). Here's an example of a dialog allowing the case status to be set from a list (we don't use editable lists yet since there's no way to add validators yet to lists):

This is just a modal/mini form created using the form designer. The nice part about this is that it can be bound directly to the object (I have many that aren't bound as well, depending on the scenario).

You can open this specific page for a particular record using this method (also possible with an action in no code designer as well) https://customerfx.com/article/opening-a-record-for-edit-in-a-specific-…

Ryan

Ryan Farley,

Thanks for the reply Ryan, that seems like exactly what we're after! I had wondered about using a Mini Page for it but wasn't sure how that would be hooked in to work. How are you triggering the mini page to be displayed, I take it it's from code? Is it using something like the following when clicking a button or whatever the trigger is:

const handlerChain = sdk.HandlerChainService.instance;
 
await handlerChain.process({
	type: "crt.CreateRecordRequest",
	entityName: "CustomEntity",
	entityPageName: "CustomEntityMiniPage",
	$context: request.$context,
	defaultValues: [{
		attributeName: "Col1",
		value: "Val1"
	}]
});

 

Or are you able to get a Mini Page to appear without some entity it's based over? For our requirements, the data field to be modified would actually be on the entity of the Form Page the user was currently on, so it didn't seem like the crt.CreateRecordRequest would make sense, but the crt.OpenPageRequest always seems to open the Mini Page as though it were a full-sized page, and the crt.UpdateRecordRequest I hadn't tried yet as I didn't already have a Mini Page for the entity and thought it likely wouldn't work as the mini pages are generally used for adding data, not editing?

 

Thanks again.

There's so many uses of modal (mini) pages beyond just what mini pages were used for typically in classic ui. 

IMO It's one of the best additions to Freedom UI, the ability to create dialogs for specific purposes, bound to a record or not, that really enhances the user experience. This is a prompt for selecting parameters for a report.

Ryan

Harvey Adcock,

You would use an "crt.OpenPageRequest". I edited my original post to include a link to an article showing how to open it to edit a record. 

Ryan

Harvey Adcock,

In older versions the "crt.OpenPageRequest" did open the page in full screen, even if a modal page. But I think that was fixed in 8.0.10 and has been working for me (it does open as a modal)

Ryan

Perfect, thanks Ryan, really helpful!

Ryan Farley,

 

One more question, is there a way to pass information from the current page to the page being opened via the OpenPageRequest? Trying defaultValues, similar to what you would use when creating a new record from a page launched by code, doesn't seem to have any effect, and I can't see any other candidates for it.

Harvey Adcock,

I’m not 100% sure but I think you can only pass values for a new record (crt.CreateRecordRequest) only. 

Alternatively, you could write some values to a global or use the StorageUtilities module and then read from the form once opened. See StorageUtilities here: https://customerfx.com/article/persisting-data-between-pages-in-creatio…

Ryan

Harvey Adcock,

You can try something like this to pass defaultValues

request.$context.executeRequest({
	type: "crt.OpenPageRequest",
	$context: request.$context,
	schemaName: "UsrYourCustom_FormPage",
	modelInitConfigs: [
		{
			action: sdk.ModelInPageAction.Edit,
			recordId: yourRecordId
		},
		{
			defaultValues: [
				{
					attributeName: "someName",
					value: "someValue"
				}
			]
		}
	]
});

 

Alex Zaslavsky,

 

Does this passing of values work for passing a value into a Page Parameter? Or is there some way to do so? The value I want to pass to a new page (either through OpenPageRequest or CreateRecordRequest) is not on the entity, it's just a parameter on a page, but we need to set this value when opening the page.

Show all comments

In this piece of code located in the module called UsrSolicitds3Page the app continue its execution and doesn’t waits user to accept the message, it even lets the user to finish reading the message until the application closes the window automatically. We need to implement this and when the showInformationDialog, the execution of the code stops and wait for the user interaction clicking on the OK button

guardaIncidente: function() {
        var hoyEs = new Date();
        var config = {
                        callback: Terrasoft.emptyFn,
                        isSilent: true
                };
               
        this.save( config );
       
        // Despliega mensaje
        this.showInformationDialog( "AVISO\n\n" +
                "Se ha cerrado Solicitud de Intervención de\n" +
                "Seguimiento y todas las Intervenciones\n" +
                "asociadas:\n\n" +
                "Numero de Intervención principal: " + this.get( "UsrNumeroint" ) +
                "\nNiño/a: " + this.get( "UsrNinoa2" ).displayValue +
                "\nConsultante: " + this.get( "UsrConsultante" ).displayValue +
                "\nFecha/Hora cierre: " + hoyEs.toLocaleDateString() + " a las " +
                hoyEs.getHours() + ":" + hoyEs.getMinutes() + ".",
                function() {}, {
                        style: Terrasoft.MessageBoxStyles.BLUE
        } );
       
},

 

File attachments

Like

6 comments

 If you need to stop user from saving a record until he clicks OK, then you need to merge the save button and change the "Click" method to your new one. Your new method will show the dialog and call this.save() after OK click.

Hi Eugene, sorry, I'm not explained well.

I need to inform the user after saves the record with a summary with some info, because of this I use a showInformationWindow, it's opens, but closes after a few of seconds automatically without the intervention of the user. What I need is it closes when users clicks on OK in the showInformationWindow. 

How it works, when user clicks on Cerrado changing UsrEstadocaso field value and some other conditions apply, we ask the user if it agrees to change the status of this record to Cerrado, this code is on onUsrEstadoCasoChanged method, when user clicks on Aceptar button calls cierraHijas method with the name of the method that finally saves the current record:

this.cierraHijas( this.get( "Id" ), this.guardaIncidente );

In cierraHijas method I change the UsrEstadoCaso on all related records to the current and finally call to the method guardaIncidente wich saves current record and displays a message to the user with the summary, here is where the code fails, because showInformationWindow closes automatically after a few seconds, I need the message was viewed in detail by the user and was be the user who decides to closes the message, not the application.

I expect I explayed better now...please let me now if you need more details

The whole piece of code is the following:

onUsrEstadoCasoChanged: function() {
	if ( this.get( "UsrEstadoCaso" ) ? ( this.get( "UsrEstadoCaso" ).displayValue === "Cerrado" ) : false ) {
		// Esta tratando de cerrar
		if ( this.get( "UsrIdultimahija" ) ) {
			// Solicitud Madre,
			this.showConfirmationDialog( "AVISO\n\nVamos a cerrar todas las hijas, seguro de querer continuar?", 
					function( returnCode ) {
						if ( returnCode === "Aceptar" ) {
							// Procede a cerrar las hijas, pasa ID de Solicitud madre
							//var varBorrar = this.get( "UsrIdultimahija" )
							this.cierraHijas( this.get( "Id" ), this.guardaIncidente );
							
						} else {
							// Usuario cancelar, deja abierta
							this.CambiaEstadoSolicitud( "Abrir" );
							
						}
					}, [ { caption:"Aceptar",
							className:"Terrasoft.Button",
							markerValue:"Aceptar",
							returnCode:"Aceptar" },
						 { caption:"Cancelar",
							className:"Terrasoft.Button",
							markerValue:"Cancelar",
							returnCode:"Cancelar" } ] );
				
		} else {
			// Si es solicitud hija de seguimiento, no deja cerrar
			if ( this.get( "Usrseguimiento" ) ? this.get( "Usrseguimiento" ) : false ) {
			// Solicitud hija NO se puede cerrar
				this.showInformationDialog( "ERROR. No puede cerrar Solicitud de Seguimiento,\n" +
								"debe cerrar la Solicitud Principal" );
				this.CambiaEstadoSolicitud( "Abrir" );
			}
		}
	}
},

// PRUEBA showConfirmationDialog
cierraHijas: function( idMadre, callback ) {
	// Cerrar hijas
	var updateQuery = Ext.create( "Terrasoft.UpdateQuery", {
		rootSchemaName: "UsrSolicitds3"
	} );
	
	// Filtro
	var filters = updateQuery.filters;
	var madreFilter = Terrasoft.createColumnFilterWithParameter( Terrasoft.ComparisonType.EQUAL,
		"Usridmadre", idMadre );
	filters.add( "IdFilter", madreFilter );
	
	// Agrega filtro a lla Query
	updateQuery.setParameterValue( "UsrEstadoCaso", "88c71452-7487-40aa-9174-b4c04609108c", Terrasoft.DataValueType.LOOKUP );
	
	// Ejecuta
	updateQuery.execute( function( result ) {
		if ( Ext.isFunction( callback ) ) {
			callback.call( scope, result );
		}
	}, this );
	
},	

// 20170109 JFL <-
guardaIncidente: function() {
	var hoyEs = new Date();
	var config = {
		callback: Terrasoft.emptyFn,
		isSilent: true
	};
		
	// Save current record
	this.save( config );
	
	// Despliega mensaje
	this.showInformationDialog( "AVISO\n\n" + 
		"Se ha cerrado Solicitud de Intervención de\n" +
		"Seguimiento y todas las Intervenciones\n" +
		"asociadas:\n\n" + 
		"Numero de Intervención principal: " + this.get( "UsrNumeroint" ) +
		"\nNiño/a: " + this.get( "UsrNinoa2" ).displayValue +
		"\nConsultante: " + this.get( "UsrConsultante" ).displayValue +
		"\nFecha/Hora cierre: " + hoyEs.toLocaleDateString() + " a las " + 
		hoyEs.getHours() + ":" + hoyEs.getMinutes() + ".", 
		function() {}, {
			style: Terrasoft.MessageBoxStyles.BLUE
	} );
},

 

Try to call save method in callback of showInformationDialog:

guardaIncidente: function() {

        var scope = this;

        

        var hoyEs = new Date();

        var config = {

                callback: Terrasoft.emptyFn,

                isSilent: true

        };

        

        this.showInformationDialog( "message.....", 

                function() { scope.save( config ); }, {

                style: Terrasoft.MessageBoxStyles.BLUE

        } );

        

},

Good!!, thanks Maksym, it works, but

Wich is the trick to use showInformationDialog usually, I have several ways when I need to communicate something to users and in variouos of them have the same problem, how we must use to it works as a modal dialog?,

When could be used simply as this.showInformationDialog( "Some text to usr" ); and when we need to use, using a function to do something?

thanks again

 

Dear Julio,

You can use showInformationDialog in case you want to display information to users. However, in case you want some particular function to execute after recieved response from users, please, write your code withing a callback function.

However, in case a sequance is not important, you can write your code after the showInformationDialog function.

Thanks Anastasia!

Show all comments