Module - creating a new dashboard button

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

• 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 example module

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.

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);

Component is created, now we need to register her in component descriptor. New button will be available on identity dashboard.

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

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