Register FieldFormat plugin in v. 7.6.2

This is basically the same question as this post:

But this one does not have a solution, at the very least the last post does not solve my issue. Although I believe there are typos in the last post also.

I am trying to upgrade my field format plugin to Elastic stack 7.6.2.

Since I have not grasped the new way to create plugins using Typescript, I tried to use the legacy implementation.

With the following code the field formatter is registered, but when I try to activate it for one field, I get an empty page similar to what is listed at the end of the first post here: Field Formatter registration Kibana 7.6.2

"plugins\truncateddialog\index.js"

    export default function (kibana) {
      return new kibana.Plugin({
        require: ['elasticsearch'],
        id: 'truncatedstringdialog',
        uiExports: {
          fieldFormats: [
            'plugins/truncatedstringdialog/public/truncatedmodal'
          ],
          injectDefaultVars(server) {
            const config = server.config();
            return {
              truncatedLength: config.get('truncatedstringdialog.maxlength')
            };
          }
        },

        config(Joi) {
          return Joi.object({
            enabled: Joi.boolean().default(true),
            maxlength: Joi.number().integer().default(50)
          }).default();
        }
      });
    };

"plugins\truncateddialog\public\truncatedmodal.js"

    import { npSetup, npStart } from 'ui/new_platform';

    export function TruncatedStringDialogProvider() {
      class TruncatedStringDialog extends FieldFormat {
        static id = 'truncatedstringdialog';
        static title = 'Truncated String Dialog';
        static fieldType = KBN_FIELD_TYPES.STRING;

        textConvert = val => {
          const length = 0;
          if (length > 0) {
            return trunc(val, {
              length: length + omission.length,
              omission,
            });
          }
          return val;
        };
        htmlConvert = (rawValue, field, hit) => {
          const length = 50;
          if (length > 0) {
            return '<button ' +
              'id="btn-' + hit['_id'] + '" ' +
              'data-document="' + hit['._id'] + '" ' +
              'data-field="fullModalStringDialog" ' +
              'data-content="' + rawValue + '">' +
              rawValue.substring(0, length) + ' ... ' +
              '</button>' +
              '<div id="dialog-modal"></div>'
          }
          return `<div>${rawValue}</div>`;
        }
      };

      return TruncatedStringDialog;
    }

    npSetup.plugins.data.fieldFormats.register([TruncatedStringDialogProvider]);
    npStart.plugins.data.fieldFormats.getType("truncatedstringdialog")

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.