Using Aurelia to create a schema form

Question

Using Aurelia to create a schema form

In my project, I am utilizing Aurelia to create a dynamic form based on a JSON data. The form is being generated from a JSON structure similar to the one shown below:

Schema = [{
    'key': 'Name',
    'display': 'Name',
    'type': 'text',
    'placeholder': 'Name',
    'required': true
},
{
    'key': 'IsSubscribed',
    'display': 'Subscribed to newsletter?',
    'type': 'checkbox',
    'placeholder': null,
    'required': false
}];

The model required to fill in the form is accessible via a Web API service. So far, I have managed to successfully implement the following template.

    <template>

    <section class="au-animate">
    <h2>Edit Form</h2>
    <form class="form-group">
        <div repeat.for="item of Schema" class="form-group">
            <label if.bind="item.type === 'text' || item.type === 'checkbox'" class="control-label" for.bind="item.key">${item.display}
                <input class="form-control" id.bind="item.key" placeholder.bind="item.placeholder" type.bind="item.type" value.bind="Model[item.key]" />    
            </label>
            <label if.bind="item.type === 'textarea'">${item.display}
                <textarea placeholder.bind="item.placeholder" value.bind="Model[item.key]></textarea>
            </label>
            ...
        </div>
    </form>
    </section>

    </template>

However, I am currently encountering challenges when the Model contains another object as a property. For instance, for the Address property, I would like to include an input field specifically for City.

This leads to a scenario where item.key = "Address.City".

I am unable to bind with either (1) Model.Address.City or (2) Model['Address']['City'] since the form is dynamically generated at runtime. My aim is to use something like (3) Model['Address.City'], allowing me to utilize Model[item.key] for binding. Is there a straightforward syntax to achieve this?

An example of a similar application using Angular JS can be found at: Angular Schema Form

Thank you for any assistance provided in advance.

javascript json aurelia

Answer 1

Answer №1

One way to achieve this is by using a binding behavior that can interpret and handle the keys appropriately. This approach will enable the binding to operate similarly to other binding expressions.

For instance, consider the following:

app.html

<template>
  <require from="./dynamic-expression-binding-behavior"></require>

  <label>
    Address 1:
    <input value.bind="model & dynamicExpression:'address.address1'">
  </label>
  <label>
    Address 2:
    <input value.bind="model & dynamicExpression:'address.address2'">
  </label>
  <label>
    City:
    <input value.bind="model & dynamicExpression:key">
  </label>
  <label>
    State:
    <input value.bind="model & dynamicExpression:'address.state'">
  </label>
  <label>
    Zip:
    <input value.bind="model & dynamicExpression:'address.zip'">
  </label>
</template>

app.js

export class App {
  model = {
    address: {
      address1: '1 Main Street',
      address2: '',
      city: 'Burlington',
      state: 'VT',
      zip: '05401'
    }
  };

  key = 'address.city';
}

dynamic-expression-binding-behavior.js

import {inject} from 'aurelia-dependency-injection';
import {Parser} from 'aurelia-binding';
import {rebaseExpression} from './expression-rebaser';

@inject(Parser)
export class DynamicExpressionBindingBehavior {
  constructor(parser) {
    this.parser = parser;
  }

  bind(binding, source, rawExpression) {
    // Parse the expression provided as a string argument for the binding behavior.
    let expression = this.parser.parse(rawExpression);

    // Modify/interpret the expression
    expression = rebaseExpression(expression, binding.sourceExpression);

    // Store the original expression of the binding for future reference.
    binding.originalSourceExpression = binding.sourceExpression;

    // Set the new expression for the binding.
    binding.sourceExpression = expression;
  }

  unbind(binding, source) {
    // Restore the original state of the binding.
    binding.sourceExpression = binding.originalSourceExpression;
    binding.originalSourceExpression = null;
  }
}

Answer 2

One way to achieve this is by using a binding behavior that can interpret and handle the keys appropriately. This approach will enable the binding to operate similarly to other binding expressions.

For instance, consider the following:

app.html

<template>
  <require from="./dynamic-expression-binding-behavior"></require>

  <label>
    Address 1:
    <input value.bind="model & dynamicExpression:'address.address1'">
  </label>
  <label>
    Address 2:
    <input value.bind="model & dynamicExpression:'address.address2'">
  </label>
  <label>
    City:
    <input value.bind="model & dynamicExpression:key">
  </label>
  <label>
    State:
    <input value.bind="model & dynamicExpression:'address.state'">
  </label>
  <label>
    Zip:
    <input value.bind="model & dynamicExpression:'address.zip'">
  </label>
</template>

app.js

export class App {
  model = {
    address: {
      address1: '1 Main Street',
      address2: '',
      city: 'Burlington',
      state: 'VT',
      zip: '05401'
    }
  };

  key = 'address.city';
}

dynamic-expression-binding-behavior.js

import {inject} from 'aurelia-dependency-injection';
import {Parser} from 'aurelia-binding';
import {rebaseExpression} from './expression-rebaser';

@inject(Parser)
export class DynamicExpressionBindingBehavior {
  constructor(parser) {
    this.parser = parser;
  }

  bind(binding, source, rawExpression) {
    // Parse the expression provided as a string argument for the binding behavior.
    let expression = this.parser.parse(rawExpression);

    // Modify/interpret the expression
    expression = rebaseExpression(expression, binding.sourceExpression);

    // Store the original expression of the binding for future reference.
    binding.originalSourceExpression = binding.sourceExpression;

    // Set the new expression for the binding.
    binding.sourceExpression = expression;
  }

  unbind(binding, source) {
    // Restore the original state of the binding.
    binding.sourceExpression = binding.originalSourceExpression;
    binding.originalSourceExpression = null;
  }
}

Using Aurelia to create a schema form

Answer №1

Similar questions

The pattern() and onkeyup() functions are unable to function simultaneously

When I use `console.log` with `req.body` in Node, the password is

Exploring the world of Node.js callback parameter passing

Activating controllers with 2 independent sliders

Heroku Internal Server Error with NextJs version 5.0.0

"Exploring the symbiotic relationship between Node.js and Express.js: an

Adding client-side scripts to a web page in a Node.js environment

Invoke a JSON request using either the subscribe method or a promise

Getting JSON Data Using Django's get_or_create

Unexpected error when using Slack SDK's `client.conversations.open()` function: "User Not Found"

The method .setArray has been deprecated in THREE.BufferAttribute. Instead, please use BufferGeometry .setAttribute for unindexed BufferGeometry operations

Only the first column of a row in Flexbox will have a line break when exceeding the

Unable to execute PHP alongside a JavaScript event listener

The JSON primitive provided is invalid while attempting to send a POST request

Utilize ethereumjs-wallet in your web browser as a standalone module

Angular JS is up and running

The issue with $.parseJSON when encountering double quotes

Assign a class to an element depending on the date

The attribute 'inventory' cannot be found in the declaration of 'WarehouseModule'

creation of cascading drop-down lists