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.