Customization

There are customizations for projects available without changing or adding code in the UI folder. This section explains how to use them.

styleMap

The styleMap is a config file located in src/js/components/editor/styleMap.js in the project directory. It should contain a map of classnames and inline styles which then can be added on any HTML attribute.

Running a rebuild is necessary after changing the styleMap.

Example:

var exports = module.exports = Object.assign({}, {
    'button-red': {
        border: '1px solid currentColor',
        cursor: 'pointer',
        display: 'inline-block',
        padding: '6px 16px',
        color: '#c00',
    },
});

CMS Layout

To create highly specialized block layouts, one can create a project specific scss file at src/js/modules/cms/styles.scss. The following example shows, how to add a red background color on all blocks with the blocktype “cms_section”:

[data-blocktype="cms_section"] {
  background-color: #cc0000;
}

Components

For custom components in the project a indivs folder containing a index file has to be created first at src/js/indivs/index.js. The following example shows how the config should look like to add an additional tab to the masterdata dataset view of a specific model:

import MasterdataDatasheet from './masterdataDatasheet';

const indivConfig = {
    MODEL_KEY_HERE: {
        tabs: [{
            id: 'datasheet',
            icon: 'info',
            label: 'Datenblatt',
            component: MasterdataDatasheet,
        }],
    },
};

export {
    indivConfig,
};

Example component:

import React from 'react';
import Button from 'xmm/components/Button';

class MasterdataDatasheet extends React.Component {
    render() {
        return (
            <div><Button /></div>
        );
    }
}

export default MasterdataDatasheet;

All UI components can be imported and used the same way as the Button.

Masterdata datatable context menu

The masterdata datatables allow custom context menu entries. For this, you have to define a model mixin like this:

class ItemMixin:
    @classmethod
    def get_indiv_contextmenu(cls):
        return [{
            'label': 'Do something',
            'action': 'do_something',
            'icon': 'play',
        }]

    @classmethod
    @api_method
    def api_do_something(cls, object_ids=None, **query):
        flask.flash('I did something!', 'success')
        # redirect to another view:
        return {
            'redirect': f'/masterdata/{cls._definition.id}/dataset/{object_ids[0]}',
        }
        # ... or reload the datatable
        # return {
        #     'reload': True,
        # }

Then you have to add the Mixin class to the settings:

MODEL_MIXINS = [
    'my_project.mixins.item.ItemMixin',
]

After a code reload / webserver restart, you can add this Mixin to your item model in the UI.