Writing your own Step form

Chances are that you’ll want to reuse the standard step form layout (i.e. with a title, an ok and back button, etc.). To do that, you can leverage a few components and base classes provided:

  • @/components/stepforms/StepFormHeader.vue is the component that generates a standard step form header bar. It should be fed with a title and stepName prop. Furthermore, you can edit the back button behaviour with the cancelEdition method of your component. The default is in the StepForm base class.

    StepFormHeader

    Example:

    <StepFormHeader :stepName="Filter Step" :title="title" />
    
  • @/components/stepforms/StepFormButtonBar.vue is the component that generates a standard step form button bar (submit / errors). You can edit the submit button behavior with the submit method of your component. The default is in the base class StepForm.

    StepFormButtonbar

    Example:

    <StepFormButtonbar />
    

Between those two elements should lie the list on inputs (text inputs, autocomplete. etc.) that your form wil need.

In most cases, you’ll want to use the StepForm component that is defined in @/components/stepforms/StepForm.vue. This component will provide default wiring for the most common logic (e.g. form validation).

Here’s a basic step form component:

import { Prop } from 'vue-property-decorator';
import fillnaSchema from '@/assets/schemas/fillna-step__schema.json';
import WidgetInputText from '@/components/stepforms/WidgetInputText.vue';
import WidgetAutocomplete from '@/components/stepforms/WidgetAutocomplete.vue';
import { StepFormComponent } from '@/components/formlib';
import BaseStepForm from './StepForm.vue';
import { FillnaStep } from '@/lib/steps';

@StepFormComponent({
  vqbstep: 'fillna',
  name: 'fillna-step-form',
  components: {
    BaseStepForm,
    WidgetAutocomplete,
    WidgetInputText,
  },
})
export default class FillnaStepForm extends BaseStepForm<FillnaStep> {
  @Prop({ type: Object, default: () => ({ name: 'fillna', column: '', value: '' }) })
  initialStepValue!: FillnaStep;

  // custom step form title
  readonly title: string = 'Fill Null Values Step';
  // initialize corresponding json schema
  editedStepModel = fillnaSchema;

  // custom `stepSelectedColumn` property that maps selected column
  // to the `column` field of the step.
  get stepSelectedColumn() {
    return this.editedStep.column;
  }

  set stepSelectedColumn(colname: string | null) {
    if (colname === null) {
      throw new Error('should not try to set null on fillna "column" field');
    }
    if (colname !== null) {
      this.editedStep.column = colname;
    }
  }
}