Javascript Plugin extension for ELN-LIMS

Developments
1

Hello everybody,

I am working in a Javascript plugin to extend the ELN-LIMS functionality. It consists in a button that launches a dialog. This is the code:

sampleFormTop: function($container, model) {
	var $jsonHelper = FormUtil.getButtonWithText("JSON Helper", function() {
    		// Show the custom dialog
    		showCustomDialog();
  	}, '', null);

In this case, the button appears in the top-part of the Sample form (as it says in the documentation).

My question is: Is possible to recreate the same button but in the Experiment form? (Without touching the inner Javascript code, I know that this is possible, but I would prefer to avoid it, if this is the only way, I will modify it then).

And also, how can I move this button to the “More…” button in the toolbar at the top? So it will be an option in this view, instead of a lonely button in the top.

Thank you very much in advance!

2

Hello,

Is possible to recreate the same button but in the Experiment form?
You could copy the same button to “experimentFormTop” please check: ELN-LIMS WEB UI extensions — Python documentation and search for “2. Extending views through the use of the Interceptor Pattern”

how can I move this button to the “More…” button in the toolbar at the top?
You can’t decide or not to be under more, but you can decide put it on the toolbar, please check:
https://openbis.readthedocs.io/en/latest/software-developer-documentation/client-side-extensions/eln-lims-web-ui-extensions.html#toolbar-extensions

Hope this helps, feel free to make further questions.

Best,
Juan

3

Hi @juanf ,

Thank you for your answers. I was testing both solutions, but without any success.

  • “experimentFormTop” works perfectly fine, thank you. The only problem is that there was no example file containing his feature (all the example plugins contain dataset and sample Form, but no the experiment field).

  • I am trying to place the button in the Toolbar following the example, but adapting it to the “experimentFormTop”, but I cannot make it work. This is how I have it now:

experimentFormTop: function($container, model) {
    		var extraToolbar = function(mode, experiment) {
        			var toolbarModel = [];
        			if (mode === FormMode.VIEW) {
            				var $demoButton = FormUtil.getButtonWithIcon("glyphicon-heart", function () {
                				showCustomDialog();
            				});
           				toolbarModel.push({ component: $demoButton, tooltip: "Demo" });
       			}
        		return toolbarModel;
    	};

    	$container.append(extraToolbar(FormMode.VIEW, experiment));
	},

I do not receive any error, but just the title of the Experiment appears, and the rest is a white screen. How should this be done under the “experimentFormTop” or “sampleFormTop” to place the button in the Toolbar?

Thank you for your help!!