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 <https://facebook.github.io/react/docs/dom-elements.html#style>`_
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.