Inject Business Services

Users
1

example

I’m using this example above to customize my properties panel in my Angular 17.x project. I need to inject a service from the application’s negotiation layer to perform some validations on the propertiesPanel’s input values. What is the way to inject the service into these functions?
Any help is welcome, thank you in advance…

import { html } from 'htm/preact';

import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
import { useService } from 'bpmn-js-properties-panel';
import { AdutoraService } from "../../src/app/cadastros/services/adutora.service";
import { HttpClient } from '@angular/common/http';

export default function (element) {

  return [
    {
      id: 'Codigo',
      element,
      component: CodigoUTA,
      isEdited: isTextFieldEntryEdited
    },
    {
      id: 'Codope',
      element,
      component: Codope,
      isEdited: isTextFieldEntryEdited
    },
    {
      id: 'CodigoSia',
      element,
      component: CodigoSia,
      isEdited: isTextFieldEntryEdited
    }
  ];
}

function CodigoUTA(props) {
  const { element, id } = props;

  const modeling = useService('modeling');
  const translate = useService('translate');
  const debounce = useService('debounceInput');

  const getValue = () => {
    return element.businessObject.$attrs['codigo'] || '';
  };

  const setValue = value => {
    console.log('Efetuar a validação de codigo UTA....:');
    return modeling.updateProperties(element, {
      codigo: value
    });
  };

  return html`<${TextFieldEntry}
    id=${id}
    element=${element}
    description=${translate('Informe o código da UTA')}
    label=${translate('Código UTA')}
    getValue=${getValue}
    setValue=${setValue}
    debounce=${debounce}
    tooltip=${translate('Informe o código da UTA caso necessário.')}
  />`;
}




function Codope(props) {
  const { element, id } = props;

  const modeling = useService('modeling');
  const translate = useService('translate');
  const debounce = useService('debounceInput');

  const getValue = () => {
    return element.businessObject.$attrs['codope'] || '';
  };

  const setValue = value => {
    console.log('Efetuar a validação Codope....:');
    return modeling.updateProperties(element, {
      codope: value
    });
  };

  return html`<${TextFieldEntry}
    id=${id}
    element=${element}
    description=${translate('Informe o Codope')}
    label=${translate('Codope')}
    getValue=${getValue}
    setValue=${setValue}
    debounce=${debounce}
    tooltip=${translate('Informe o Codope caso necessário.')}
  />`;
}



function CodigoSia(props) {
  const { element, id } = props;
  const modeling = useService('modeling');
  const translate = useService('translate');
  const debounce = useService('debounceInput');
  //const businessService = useService('AdutoraService');
  const httpClient = useService('HttpClient');
  

  const getValue = () => {
    return element.businessObject.$attrs['codigoSia'] || '';
  };

  const setValue = value => {
    console.log('Efetuar a validação de codigo SIA....:');
    return modeling.updateProperties(element, {
      codigoSia: value
    });
  };

  const onBlur =   event => {
    console.log('Efetuar a validação de codigo SIA no evento ONBlur....:');
    try {
      const data =  httpClient.get(' url service here...');
      console.log(data);
    } catch (error) {
      console.error('Erro ao obter dados:', error);
    }
    const value = event.target.value;
    return modeling.updateProperties(element, {
      codigoSia: value
    });
  };

  return html`<${TextFieldEntry}
    id=${id}
    element=${element}
    description=${translate('Informe o Codigo Sia')}
    label=${translate('Código Sia')}
    getValue=${getValue}
    setValue=${setValue}
    onBlur=${onBlur}
    debounce=${debounce}
    tooltip=${translate('Informe o Codigo Sia caso necessário.')}
  />`;
}

My index.js 
import { HttpClient } from '@angular/common/http';
import { AdutoraService } from '../../src/app/cadastros/services/adutora.service';
import CustomContextPad from './CustomContextPad';
import CustomPalette from './CustomPalette';
import CustomRenderer from './CustomRenderer';
import CustomPropertiesProvider from './customPropertiesProvider';



export default {
  __init__: ['customContextPad', 'customPalette', 'customRenderer', 'CustomPropertiesProvider',
  ,'HttpClient'
  /* ,'customPropertiesPanelProvider' */],
  customContextPad: ['type', CustomContextPad],
  customPalette: ['type', CustomPalette],
  customRenderer: ['type', CustomRenderer],
  CustomPropertiesProvider: [ 'type', CustomPropertiesProvider ],
 // AdutoraService: ['type',AdutoraService],
  HttpClient: ['value',HttpClient]
 // customPropertiesPanelProvider: [ 'type', CustomPropertiesPanelProvider ],
  
 
};

I Always get error:

DiagramProps.js:123 Erro ao obter dados: TypeError: httpClient.get is not a function
    at onBlur (DiagramProps.js:120:32)
    at HTMLInputElement.A (preact.module.js:1:4651)
    at _ZoneDelegate.invokeTask (zone.js:403:31)
    at core.mjs:13897:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:13897:36)
    at _ZoneDelegate.invokeTask (zone.js:402:36)
    at Object.onInvokeTask (core.mjs:14210:33)
    at _ZoneDelegate.invokeTask (zone.js:402:36)
    at Zone.runTask (zone.js:174:47)
    at ZoneTask.invokeTask [as invoke] (zone.js:484:34)

What is wrong?

2

Angular (17) injection may or may not be the same as bpmn-js injection. If you provide a value in a bpmn-js/diagram-js module then it is used as is, not as the instance of the Angular service (likely what you expect?).

1 Like
3

Yes, that’s what I expected, I managed to solve it using a service like this:

export let serviceInstance = null;

export function setServiceInstance(serviceInstance) {
  serviceInstance = serviceInstance;
}

Thanks.

4

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