Is it possible to trigger an existing Create pop-up from code studio?

Liberty Create - Build Advice
1

Hi,

As title. Do pop-ups have a url ? Page path in code studio/ references ?

Thanks for any help,

Mark

2

Hi Mark,
I guess the answer is kind of ‘no’, however they can still be used.

Note the code and approach are borrowed from the Grello widget available in the AppShare.
It is possible that some new methods are available but the below code still work on my site.

The pages can be added for selection in the main.js get_settings function… but it may be possible to reference them in other ways, but this way you can select the popups you want to use from the build page where you place the widget.


			page_list_edit:{
				fikso_id:-109,
				main_label:"Popup page for adding/editing lists",
				base_format:"choice",
				choices:mats.build_choices('page', {type:'popup'}),
				panel:'grello',
				settings:{
					required:true
				}
			},
			page_item_edit:{
				fikso_id:-110,
				main_label:"Popup page for adding/editing items",
				base_format:"choice",
				choices:mats.build_choices('page', {type:'popup'}),
				panel:'grello',
				settings:{
					required:true
				}
			},

In main.js add something like the following.
The code defines a list of popups available for use from the custom widget.
The ‘replace’ function is used to strip the ‘PAG’ prefix from the page identifier, leaving just the page id as a reference for later use…

remember to ‘return’ action_pages to the front end code.

			var action_pages = {
				add_list:'/popup/' + widget.get_setting('page_list_edit').substr(3).replace(/^0+/, ''),
				edit_list:'/popup/' + widget.get_setting('page_list_edit').substr(3).replace(/^0+/, ''),
				add_item:'/popup/' + widget.get_setting('page_item_edit').substr(3).replace(/^0+/, ''),
				edit_item:'/popup/' + widget.get_setting('page_item_edit').substr(3).replace(/^0+/, '')
			};

In main.html add an element that your users might click on similar to below:

<a href="#" v-on:click="popup_page" data-action="edit_item" :data-action_params="'context_record_id=' + item.id">{{item.name}}

Here the user is selecting to “edit_item”, which is the last of the available popups in the “action_pages”
The v-on:click triggers a function in frontend.js

In the frontend.js add a method similar to below:

popup_page:function(e) {
			if (e.target instanceof HTMLInputElement) {
				return false;
			}

			var url = this.action_pages[$(e.currentTarget).data('action')];
			var params = $(e.currentTarget).data('action_params')

			if (params) {
				url = url + '?' + params;
			}

			if (!url) {
				return false;
			}
			e.preventDefault();

			new mats.system_modal_popup(url, {
				display_footer: false,
				cancel_text: $(e.currentTarget).attr('data-cancel')
			});
			return false;
		}
1 Like