How to have a Freedom UI Modal Dialog with an editable field?

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

9 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"
				}
			]
		}
	]
});

 

Show all comments