Custom Hardware Asset Field in Web Portal

Sarah_Geihs

Hi all,

We want to expand the information about the hardware assets to include two commercial numbers: "Anlagennummer" and "Anlagenunternummer".

I have already added the two fields to our class extension and revised the form for the console.

However, the two fields have special requirements that I was able to implement for the console, but I don't know how to do it on the web.

• Both fields are decimal numbers and should not contain letters, special characters or spaces.
• The length of the two fields is limited to 12 and 4
• If a number is entered that is shorter than this specified length, the field should be filled with leading zeros.

Because of the leading zeros, I decided on a string and not an int field and limited the input to numbers in the wpf of the form. After the field is filled, it is automatically populated with zeros:

Class:
<Property ID="Anlagennummer"  Type="string" AutoIncrement="false" Key="false" CaseSensitive="false" MinLength="0" MaxLength ="12" Required="false" Scale="0" />

<Property ID="Anlagenunternummer"   Type="string" AutoIncrement="false" Key="false" CaseSensitive="false" MinLength="0" MaxLength ="4" Required="false" Scale="0" />
 
Form:
<TextBox Name="Anlagennummer"  Text="{Binding Path=Anlagennummer, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" PreviewTextInput="NumberValidationTextBox" LostFocus="Anlagennummer_TextChanged" toolbox:Validation.StringLengthMax="12" />
<TextBox Name="Anlagenunternummer"  Text="{Binding Path=Anlagenunternummer, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" PreviewTextInput="NumberValidationTextBox" LostFocus="Anlagenunternummer_TextChanged" toolbox:Validation.StringLengthMax="4"  />

Functions (c#):
private void NumberValidationTextBox(object sender, TextCompositionEventArgs e)

{

Regex regex = new Regex("[^0-9]+");

e.Handled = regex.IsMatch(e.Text);

}
private void Anlagennummer_TextChanged(object sender, RoutedEventArgs e)

{

    Anlagennummer.Text = Anlagennummer.Text.Trim().PadLeft(12, '0');

}

Thats worked. So far so good.

Now I would like to add these functions in our webportal. I added both fields in the hardwareasset.js (in custom Forms):

{

columnFieldList:

  [

    { DataType: "Decimal", PropertyDisplayName: "Anlagennummer:", PropertyName: "Anlagennummer", DecimalPlaces: 12 },

    { DataType: "Decimal", PropertyDisplayName: "Anlagenunternummer:", PropertyName: "Anlagenunternummer", DecimalPlaces: 4  }

  ]

},

I was hoping that the DecimalPlaces attribute only allowed the legal characters. Unfortunately that doesn't work.

Long story short:

I don't know how to:

  1. limit the field length to 12 and 4

  2. can add the leading zeros when filling (or after). 

I know the JS function: text.padStart(12) (e.g)

But I don't know how I can monitor the field, like C# for example with the "LostFocus"

Can you help me there?

Thanks, Sarah

Geoff_Ross

Hi @Sarah_Geihs

Not fully tested this end to end but here's a starter.
First of all, beuase they are defined as strings in the MP. I think you'll want a string control on the form. This allows you to set a MinLength and MaxLength.

{ DataType: "String", PropertyDisplayName: "Anlagennummer", PropertyName: "Anlagennummer", Required: true, MinLength: 12, MaxLength: 12}

As for the padding, this code will create a null task (runs on page load) for HWA, which binds to the control's focusout event and does the padding.

app.custom.formTasks.add('HardwareAsset', null, function(formObj, viewModel) {
    $(function() {
        $('.cs-form__textbox--Anlagennummer > input').focusout(function() {
            $(this).val($(this).val().padStart(12,"0"));
        });
    });
});

Geoff

Sarah_Geihs

Hi Geoff,

The leading zeros are appended, but are not saved when the asset is saved.

How can I specify that only numbers should be entered, if I define the field as a string?

Thanks, Sarah