====== Module - creating a new dashboard button ======

In this tutorial we will describe how to create and register new button on identity dashboard.

===== What do you need before you start =====

  * You need to install CzechIdM 9.6.0 (and higher). We have CzechIdM installed for this tutorial on server ''http://localhost:8080/idm-backend''.

Source codes for this tutorial can be found in the [[https://github.com/bcvsolutions/CzechIdMng/blob/develop/Realization/frontend/czechidm-example/src/content/dashboards/button/IdentityContractDashboardButton.js|example module]]


===== 01 Create a button component =====

We will use ''AbstractIdentityDashboardButton'' component as superclass for creating custom button (prepared in core ''advanced'' component library)  - contains some default method implementations (common button features ... boiler plate). Newly created button will do a redirect to selected identity contacts tab.

<code javascript>
import { connect } from 'react-redux';
//
import { Advanced, Managers } from 'czechidm-core';

const identityManager = new Managers.IdentityManager();

/**
 * Quick button to identity detail with contract tab selected.
 *
 * @since 9.6.0
 */
class IdentityContractDashboardButton extends Advanced.AbstractIdentityDashboardButton {

  constructor(props, context) {
    super(props, context);
  }

  getIcon() {
    return 'component:contract';
  }

  isRendered() {
    const { identity, permissions } = this.props;
    //
    return identityManager.canRead(identity, permissions);
  }

  getLabel() {
    return this.i18n('content.identity.identityContracts.header');
  }

  getTitle() {
    return this.i18n('content.identity.identityContracts.title');
  }

  onClick() {
    this.context.router.push(`/identity/${encodeURIComponent(this.getIdentityIdentifier())}/contracts`);
  }
}

function select(state) {
  return {
    i18nReady: state.config.get('i18nReady'), // required (listen locale is changed)
    userContext: state.security.userContext // required (listen logged user context)
  };
}

export default connect(select)(IdentityContractDashboardButton);
</code>

===== 02 Register button component =====

Component is created, now we need to register her in [[https://github.com/bcvsolutions/CzechIdMng/tree/develop/Realization/frontend/czechidm-core#component-descriptor|component descriptor]]. New button will be available on identity dashboard.

Add component into module's ''component-descriptor.js'':

<code javascript>
...
module.exports = {
  ...
  'components': [
    ...
    {
      'id': 'identity-contract-dashboard-button',
      'type': 'identity-dashboard-button',
      'order': 150,
      'component': require('./src/content/dashboards/button/IdentityContractDashboardButton')
    }
    ...
  ]
};
...
</code>

{{:tutorial:dev:screenshot_from_2019-04-10_13-49-00.png|}}