How to set fw-form-control properties

Hello
I am new to working with Crayons and struggling with setting properties via fw-form-control element.

I want the fw-datepicker, which is created via fw-form-control to have no footer.
How to set the property show-footer to false with the fw-form-control element.

As explained here, I use fw-form and fw-form-control to build my datepicker.

My Form control element does look like this:

<fw-form-control type="DATE" name="pu_date" placeholder="Date" required label="Date" id="pu_date">
    </fw-form-control>

And the code generated looks like this:

<fw-datepicker hint-text="" error-text="" class="hydrated"><input type="hidden" class="hidden-input" name="pu_date" value=""></fw-datepicker>

I have seen, that I can set the “show-footer” property directly on the fw-datepicker element, but how to implement the fw-form-control element that the fw-datepicker is created with show-footer=“false”?

Hi @ThomasH!. Thank you for showing interest in adopting crayons v3.

To set any additional props for crayons components using fw-form-control, you can make use of fieldProps property. You can refer it here .

For example, In your use case to set show-footer to false for datepicker, this can be achieved using:

<fw-form-control type="DATE" name="pu_date" placeholder="Date" required label="Date" id="pu_date">
 </fw-form-control>
<script>
  var date = document.querySelector('#pu_date');
  var fieldProps = {
    'showFooter': false,
    // any other additional props can be set here…
  };
  date.fieldProps = fieldProps;
</script>

Please let us know if this works for you and if any further help is required.

Hey @Shravan_K

Thank you for your quick reply, I was somehow expecting that these field-props are used for that, but did not have any clue on how to use it.

I tried it and it works well.

I have only one issue left with the date-picker created from fw-form-control.
It is readonly, so I can’t type in the date.

Even if I add ‘readonly’=false to the fieldprops, it does not show up as editable.

Hi @ThomasH , Thank you for your confirmation.!

Regarding using readOnly as fieldProps, we are able to reproduce the issue. We will fix it in upcoming version and keep you posted here!.

Thank you for pointing it out.

1 Like

Hey Community,

I’ve seen, that there already was a change. I now can enter a date manually in the datepicker.
However, the entered date is not set as the datepicker’s value. I still have to click the respective date.

I have another question regarding validation.
I tried to get Yup validationScheme running, but did not work - Guess more because of my lacking script skills, not because of the software :slight_smile:
I then tried to do the validation via async function (as it is described here).
Validation seems to work, so after doSubmit, I get isValid = false, but the fielderrors, are not set.

How are the form fields informed properly?

My validate current validate function looks like this:

  const validate = async (values) => {
    // do custom validation and return error or {}
    console.log(values);
    return {
      pu_invoice_numer: "Invoice number is required",
    };
  };
  document.querySelector("#fw-pickup-form").validate = validate;

Thank you for your help.

Best,
Tom

Hi Thomas,

Regarding the datepicker, we would recommend using readonly prop since you can ensure the date-format is strictly followed when a user select a value.

Without readonly prop, for now we have 2 options, the user have to click on the selected date or you can enable showFooter option to notify user that they have to click on Update to ensure the date is updated.

Meanwhile we are checking the feasbility to enable the date to be updated automatically once the user types in the textbox and press Enter.

Regarding Form-Control validation,

I tried with the below code and am able to see the field errors returned from the validate fn shown when you call doSubmit. Can you please compare this with your code and let us know if you are missing something ?.

Thanks.

<div id="form-container">
  <button id="submit">Submit</button>
  <button id="reset">Reset</button>
</div>
<script type="application/javascript">
  var form = document.createElement('fw-form');
  var formContainer = document.querySelector('#form-container');
  document.querySelector('#submit').addEventListener('click', async (e) => {
    const { values, isValid } = await form.doSubmit(e);
    console.log({ values, isValid });
  });
  document.querySelector('#reset').addEventListener('click', (e) => {
    form.doReset(e);
  });
  var validatef = async (values) => {
    // do custom validation and return error or {}
    console.log(values);
    return {
      first_name: "Invoice number is required",
    };
  };
  var formSchema = {
    name: 'Test Form',
    fields: [
      {
        id: '2978f820-704b-46c7-9f88-110e14e34a8c',
        name: 'first_name',
        label: 'First Name',
        type: 'TEXT',
        position: 3,
        required: true,
        placeholder: 'Enter…',
        hint: 'Please provide a text of at max 100 characters',
        choices: [],
      },

      {
        id: '3978f820-704b-46c7-9f88-110e14e34a8c',
        name: 'last_name',
        label: 'Last Name',
        type: 'TEXT',
        position: 3,
        required: true,
        placeholder: 'Enter…',
        hint: 'Please provide a text of at max 100 characters',
        choices: [],
      },

        {
        id: 'f319f86f-1b6a-49cb-b4b6-cf487be94595',
        name: 'landmark',
        label: 'Landmark',
        type: 'PARAGRAPH',
        position: 7,
        required: true,
        Placeholder: 'Enter some text…',
        hint: 'Please enter the nearest landmark',
        choices: [],
      },

      {
        id: 'f319f86f-1b6a-49cb-b4b6-cf487be94595',
        name: 'pincode',
        label: 'Pincode',
        type: 'NUMBER',
        position: 8,
        required: false,
        Placeholder: 'Enter…',
        hint: 'Please enter your Pincode',
        choices: [],
      }

    ],
  };
  var initialValues = {

  };
  formContainer.prepend(form);

  form.formSchema = formSchema;
  form.initialValues = initialValues;
  form.validate = validatef;
</script>

1 Like

Hello @arvindan.ta

thank you for your reply.

Regarding readonly in datepicker.
In 75-80% of cases, our agents will have the date ready for copy/paste in German locale format.
So copy/paste → Enter will save us a lot of time.
On top of that, the datepicker is not shown fully in ticket details sidebar (too wide) - So some dates can’t be chosen very well.
Therefore readonly=false would help a lot. Thank you for investigating the options.

Regarding validation.
In your code, I see the form created via formSchema. If done so, validation of required fields does work properly even without implementing it manually.

But I create the form static - And when going that way, the “required” attribute does not seem to create an automatic validation, nor does validation function work as I expected.

Hi @ThomasH ,

We will get back after checking the feasbility on the datepicker usecase.

Regarding form validation,

Can you please try the below code using static form. Am able to see that the validation is working fine with the below code using static form.

   <div id="static-form-container">
      <fw-form id="fw-static-form">
        <fw-form-control
          type="TEXT"
          name="first_name"
          placeholder="First Name"
          required
          label="First Name"
          id="first_name"
        ></fw-form-control>

        <fw-form-control
          type="TEXT"
          name="last_name"
          placeholder="Last Name"
          required
          label="Last Name"
          id="last_name"
        ></fw-form-control>

        <fw-form-control name="cin" required label="Custom native in">
          <input
            name="cin"
            id="cin"
            placeholder="custom input"
            autocomplete="off"
        /></fw-form-control>
      </fw-form>
      <button id="submit-static-form">Submit</button>
      <button id="reset-static-form">Reset</button>
    </div>
    <script type="application/javascript">
      var formStatic = document.querySelector('#fw-static-form');
      document
        .querySelector('#submit-static-form')
        .addEventListener('click', async (e) => {
          const { values, isValid } = await formStatic.doSubmit(e);
          console.log({ values, isValid });

          if (isValid) {
            // make ajax post end point with values
            // fetch("/post",values);

            // if error from backend , set Errors - passing key value pair
            formStatic.setFieldErrors({
              first_name: 'First Name must be unique <<Server Error>>',
            });

            // reset the form if required if success
            // formRef.current.doReset(e);
          }
        });
      document
        .querySelector('#reset-static-form')
        .addEventListener('click', (e) => {
          if (document.querySelector('#cin'))
            document.querySelector('#cin').value = '';
          formStatic.doReset(e);
        });
      var validatef = async (values) => {
        // do custom validation and return error or {}
       console.log(values);
        return {
            first_name: 'Invoice number is required',
       };
      };
      var initialValues = {};
      formStatic.initialValues = initialValues;
      formStatic.validate = validatef;

      function handleCustomInput(e) {
        console.log('handle input');
        formStatic.setFieldValue([e.target.name], e.target.value);
      }

      document
        .querySelector('#cin')
        .addEventListener('input', handleCustomInput);
      document
        .querySelector('#cin')
        .addEventListener('change', handleCustomInput);
      document
        .querySelector('#cin')
        .addEventListener('blur', handleCustomInput);
    </script>

1 Like

Hey @arvindan.ta

thank you for your answer, found the issue. Had a fuxxxing typo:
image

When returning pu_invoice_number it works fine. :roll_eyes:
Sorry, my bad.

2 Likes

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