Topic on Talk:VisualEditor/Gadgets/Add a tool

Hi.

I successfully added a few custom tools in my mediawiki and they are working great, but none of them is capable of open a dialong in which the user can input parameters for my templates. I would love to add a button to my Visual Editor where users could press it to pass a string value to a parameter called "titulo" in my template called "Fluxograma" for instance, but I can't make it work properly. PS: "Fluxograma" stands for "Flowchart" in portuguese, and the template is using DrawIo Extension and is working properly, but I would like to make it easier to insert new flowchars then manually searching in the template menu. I would like a buttom for itself, asking for a name/title ("Titulo) and inserting the template.

I also intend to use the same strategy to add a buttom to insert highlightsyntaxjs (extension) tags (passing the language parameter and the text with the code to be highlighted), is this indeed the best strategy for such things?

My attempt so far is on the code below:

function criaFluxograma() {
	var Fluxograma = [ {
		type: 'mwTransclusionBlock',
		attributes: {
			mw: {
				parts: [ {
					template: {
						target: {
							href: 'Template:Fluxograma',
							wt: 'Fluxograma'
						},
						params: {
							'titulo': {
								wt: 'Nome'
							}
						}
					}
				} ]
			}
		}
	}, {
		type: '/mwTransclusionBlock'
	} ];
	
ve.ui.commandRegistry.register(
	new Fluxograma( 'comandoFluxograma', {
		args: [ Fluxograma, false ],
		supportedSelections: [ 'linear' ]
	} )
);


function insFluxograma( name, options ) {
	insFluxograma.parent.call( this, name, null, null, options );
}
OO.inheritClass( insFluxograma, ve.ui.Command );

	insFluxograma.prototype.execute = function( surface, args ) {
	args = args || this.args;
	surface.getModel().getFragment().collapseToEnd().insertContent( args[0], args[1] ).select();
	surface.execute( 'window', 'open', 'transclusion' );
	return true;
};


	insFluxograma.static.name = 'Fluxograma';
	insFluxograma.static.group = 'insert';
	insFluxograma.static.title = 'Fluxograma';
	insFluxograma.static.commandName = 'comandoFluxograma';
	insFluxograma.static.icon = 'lock';
	insFluxograma.static.autoAddToCatchall = false;
	insFluxograma.static.autoAddToGroup = true;
	ve.ui.toolFactory.register( insFluxograma );

}

// Inicialização
mw.hook( 've.loadModules' ).add( function( addPlugin ) {
	addPlugin( criaFluxograma );
} );

Can anyone help me?