Marvin JS Example - Configure toolbars and services

Back to index

This example demonstrates how to switch off certain server-side features in an editor that has a specific toolbar setting. New buttons can not be added through this usecase, and only those buttons can be removed which would be available with the toolbar preset.

Embed the Marvin JS editor without the default webservices (editor.html) and specify the search layout:

<div class="resizable">
    <iframe src="../editor.html" id="sketch" class="sketcher-frame" data-toolbars="search"></iframe>

Include webservices.js in order to reach default webservice locations.

<script src="../js/webservices.js"></script>

Bind a listener to the loading of the sketcher. When the sketcher is loaded, the setServices method setups the services.

$(document).ready(function handleDocumentReady (e) {
	MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
	},function (error) {
		//what should happen if marvinjs initiation fails.

The setServices method receives the reference to the sketcher object as parameter. The excluded object declares services to switch off. With the predefined getDefaultServices(), you can get factory settings of services.

When you merge the above objects, the new one specifies all services (those ones that are not specified in excluded inherits the default value, the others are overwritten).

Finally, call setServices function of the sketcher with the above settings. After then, enabled services are activated (if current layout includes their button) and buttons of disabled services are removed.

function setServices(marvinSketcherInstance) {
	// set null value for those services that you would like to switch off
	var excluded = {
		"stereoinfows": null, 
		"hydrogenizews": null,
	// all services
	var defaultServices = getDefaultServices();
	// merge defaultServices and excluded into an empty object
	// the new object contains the result
	var services = $.extend({}, defaultServices, excluded);
Back to index