How to stop entering characters in textbox..?

[kmk]

Hi Mates,

we have a requirement, that is users can enter only numbers but not characters in textInput box.

i tired to change type property with "Number" but issue is can not enter comma if textInput box type is Number.

Means user has to enter number along with comma ex...30,20,50 etc but comma can`t enter (not allowing).

 your help is highly appreciated.

[DianaBirkelbach]

Hi @kmk , 

because the Numbers in Dynamics are not necessarily using the browser settings, I would use office ui fabric (fluent ui) for a number control: https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield . 

There you can specify the needed format.

Otherwise I would take another react number control (maybe if you need the spinning buttons: up/down).

Best regards,

Diana

[kmk]

Hi @DianaBirkelbach 

Thanks for reply.

i really don`t know how to use office/fabric UI in powerapps.

Showcode shows code but i dont think we can add our custom code in powerapps, please let me know how can we add.

[OOlashyn]

Hi @kmk,

You can check out this video from @a33ik on how to use office-fabric-ui and React with pcf. There is also a Microsoft front end bootcamp (link) that you can use to learn by building a todo app with react and office-fabric-ui.

[DianaBirkelbach]

Hi @kmk ,

I thought that you mean a PCF (code component), that you can use in a Model or Canvas App.

I had a look, and I'm not sure anymore that you can use the office-ui-fabric (fluent ui) TextField, since I don't find the property for the i18n  or pattern. 

Making a number control with plain HTML is like looking for trouble. I've found only this (for instance for a german number):

<input name="myinput" value="0" step="0.01" lang="de-DE" type="number" onchange="alert(this.value)"/>

The "lang='de-DE'" should do it, but unfortunately works for me only in Firefox, but not in Chrome. So is not safe to use.

A react component that I've already used for a HTMLWebResource in Dynamics365 is "react-number-input": https://www.npmjs.com/package/react-numeric-input , but you would have to format and parse the number by yourself.

But if you are not looking for a PCF component, I cannot help much. I don't know how it's done in a CanvasApp without a code component.

Best regards,

Diana

[PowerMaverick]

You can use IsMatch function and add regular expression. Something like below.

If(
    IsMatch(
        TextInput1.Text,
        "\d+[\,\.]*\d+",
        MatchOptions.Contains
    ),
    Set(SetText, "Valid"),
    Set(SetText, "Invalid")
)

I have added this on "OnChange" function of Textbox. 

----
Danish Naglekar | Power Maverick
If this post helps, then please consider Accept it as the solution to help the other members.

[kmk]

Hi @OOlashyn,

Thanks for reply, it seems like its component development, if yes can we import piece of component in to canvas apps ..?

[OOlashyn]

Hi @kmk,

Yes, this is a custom component development. Yes, you can import and use your custom components in Canvas Apps (with some exceptions like using Web Api).