How to return Integer in custom React Widget

2
What is the correct way of sending an integer value in a custom react widget to the Mendix modeler/runtime?  Is setValue the expected method or setTextValue?  I am unable to find the correct way to convert a value to the correct type that both Typescript and the Mendix runtime expect.  setTextValue appears to take care of the type conversions for me. I have followed the tutorial as outlined in Build a Pluggable Web Widget: Part 1 and referenced the editable values in Client APIs Available to Pluggable Widgets. Using the Text Box project as an example, I changed <attributeType name="String"/> to <attributeType name="Integer"/> in the widget XML file and then performed type conversions as needed.  Assuming value = ‘1000’, the .setTextValue() method works for the onUpdate action and converts the value into a type Mendix expects. private onUpdate(value: string): void { this.props.textAttribute.setTextValue(value); } If i try to use the .setValue() method, any form of type conversions such as Number(value), Big(value) or just passing a straight integer, eg 1000, does not work.  private onUpdate(value: string): void { this.props.textAttribute.setValue(Big(value)); } After resolving the typescript errors, the Mendix runtime throws “Error: Value 1000 is not assignable to attribute of type Integer.” Am I to use setTextValue to parse integer values to Mendix integer values or is there a way to use setValue?  What is the recommended method? Edit with additional context: Changed XML attributes to type Integer <property key="textAttribute" type="attribute" onChange="onChangeAction"> <caption>Attribute (path)</caption> <attributeTypes> <attributeType name="Integer"/> </attributeTypes> </property> Changed any reference of the value property to number, eg in the TextInput component: export interface InputProps { value: number; onUpdate?: (value: number) => void; } private onChange(event: ChangeEvent<HTMLInputElement>): void { if (this.props.onUpdate) { this.props.onUpdate(Number(event.target.value)); } Now in the UI TextBox.tsx file, I have: private onUpdate(value: number): void { this.props.textAttribute.setValue(value); } Here is where the issues start.  This last function is what interfaces with Mendix.  setValue() is expecting a value of type Big.JS. TS2345: Argument of type 'number' is not assignable to parameter of type 'Option<Big>'. With that error, I convert any reference of a number value to a type Big, and change the onUpdate value to Big type: private onUpdate(value: any): void { this.props.textAttribute.setValue(Big(value)); } This clears out all typescript related errors (for anyone repeating these steps, big.js does not appear to be an included javascript file at runtime, you need to add the big.js to your resources folder and add a reference to it in your index.html header).  At runtime, I get a new error and no ability to change the integer value in the text box: Error: Value 1 is not assignable to attribute of type Integer.   Second Edit: Re-reading the documentation, it appears setTextValue is the correct method to use to pass numeric values from the widget to Mendix. method setTextValue — a version of setValue that takes care of parsing. setTextValue also validates that a passed value can be parsed and assigns the target attribute’s type. private onUpdate(value: string): void { this.props.textAttribute.setTextValue(value); }  
asked
2 answers
1

Hi Michael, this happens because in your onUpdate function you define “value” as string.

Instead of:

private onUpdate(value: string): void {
 this.props.textAttribute.setValue(value); 
}

try:

private onUpdate(value: number): void { 
  this.props.textAttribute.setValue(value); 
}

 

answered
0

 Hi Michael, you could cast the incomming string value to an integer. 

private onUpdate(value: string): void { 

  this.props.textAttribute.setValue(parseInt(value));

}

 

 

answered