David Searle

Founder, Nxtflip.com
Building something new, one piece at a time.

List fields sometimes available sometimes not

I'm getting confused by when a list will expose fields within an item and when it won't.

From the same API, but two GET calls, on one I get a list of fields to select from:


The other I don't:


The same API call previously did return the fields - and on an earlier screen is still displaying a field (name), but if I use the drop down now, no fields are available to select from, only the parent object.

Is there a setting somewhere I am missing?

Low-code inline form validation


This short tutorial will walkthrough:
  1. Validation of text input fields with realtime visual feeback
  2. Pre-API submission validation to ensure only valid forms are submitted to the API
Below the video, the code snippets to complete the tutorial are provided. 

Using a custom component to validate text entry in realtime:

To validate form entry in realtime, you need two code snippets -
  1. A validation function, which uses a regex string to validate the entry and returns true (valid) or flase (invalid)
  2. A component which takes the text input field as a prop and renders different output dependant on whether the field is currently valid or invalid.

Writing your validation function

To set these up, goto the Custom Components and create a 3 line validation function following this format:
export function validateName(strName){
  const regex = '^[^±!@£$%^&*_+§¡€#¢§¶•ªº«\\/<>?:;|=.,]{1,20}$';
  const valid = strName.match(regex);
  if (valid) {return true;} else {return false;}
}
This validation function is for a name field and will accept all alphanumeric text entries between 1 & 20 characters, but not the special characters listed within the expression. the .match function returns true if there is a regex match and the final line returns this result.

Writing the custom component

With this in place, a short custom component can then be exported to be placed anywhere on the form:
export const NameValid = ({strName}) => {
   if (!validateName(strName)){
    return (
      <Icon
        name="MaterialIcons/error-outline"
        color={'red'}
        size={24}
      />
    ) 
    } else {
      return '';
  } 
}
This component calls the validateName function and passes the textinput variable to it. If the validate function returns false, it displays the Red Error icon, otherwise it returns an empty string. The custom component will be called each time the textinput field is updated, providing realtime updates on the screen.

Setting up the form

To place the component on the screen, create a row with three elements:


In this example, the PaletteName is given the fieldName of 'name'. The custom component is then configured with the strName prop being passed the {name} variable:


This pattern can be followed for all fields on a form and by changing the regex or what is returned by the custom component, can be flexibly adapted to your fields and UI.

Pre-API submission form validation:

While the realtime form validation provides feedback to the user, it doesn't actually prevent invalid form submissions. To do this, we replicate the validation function as a Custom Function (N.B. with a minor tweak) and a ThrowError function to halt execution if one (or more) validation functions fail to validate. 

Writing the validation function as a Custom Function:

The Custom Function version of the validate function, is almost identical to the one above, but returns a string rather than a boolean:
function validateName(name) { 
const regex = '^[^±!@£$%^&*_+§¡€#¢§¶•ªº«\\/<>?:;|=.,]{1,20}$';
  const valid = name.match(regex);
  if (valid) { return 'true'; } else { return 'false';}
}

Writing the Throw Error function:

The throw error function allows multiple fields to be validated and for execution to be halted if any return false:
function throwError(vName, ...){
if (!vName || ...) {
  throw new Error('Not all fields valid');
}
}
NB: In the snippet above '...' represents further fields which you have validated but you need to name each of them in the function parameters.

Configuring the pre-submission validation:

With these 2 functions in place, you can setup the Interactions for the submission button on the form (this screenshot shows 7 fields being validated before the throwError function is called):

In each Custom Function, follow the same pattern to setup the validation check:

In this interaction, the argument name is passed the textinput field "name" and the result is vName (i.e. validName).

In the throwError custom function, each of the validation function results are then passed through:

As we had to return a string version of true or false in the Custom Function, we then transform this back to a boolean with the Parse Boolean transformer before passing to the throwError function.

If any of the validation results are false, the throwError function throws its error and execution halts, preventing submission of the form.

Completing the form submission

After this interaction, you can then add the API Request to Post the form and navigate away from the screen as usual.

And that's it - the form provides visual feedback if invalid fields are entered and prevents invalid forms being submitted to your backend.
Like Comment

Tutorial / Code Snippet for realtime form validation

Hi,

I've been playing with Draftbit for a couple of weeks, but one area that I've spent a fair amount of time noodling through is realtime (inine) form validation. I think I've managed to get it all working in my example screen - but a tutorial which explains how to do this would have saved me loads of time and also been a useful explainer in how to use the various different types of variables:

 
Cheers
Like Comment