/cn-flex-form

Flex Form library by CitizenNet

Primary LanguageJavaScript

CitizenNet Flex Form Library CircleCI

Flexible form-building library by CitizenNet

Contributing

To get started run to download all dependencies:

yarn install

Testing & Development

Add any test to the /test folder, it is recommended to write tests before adding or modifying any methods.

You can use a watch script to automatically build and test your files when any are modified.

yarn run watch

Alternatively you can individually run yarn run test or yarn run build to run either script independently, though it is not recommended to ever build without making sure all tests pass.

Installation

Make sure you have dependencies installed

yarn install

To build

yarn build

To watch for file changes and automatically apply them to the relevant service (wildcat will be this example--could also be quicksight)

bower link
yarn run watch
cd ~/src/wildcat
bower link cn-batch-forms
npx gulp watch

Creating a New Release and Applying It

  1. Click "Releases" in the menu at the top of the repo.
  2. Github Workflow - Step 9
  3. Github Workflow - Step 10
  4. type the next logical version into the tag Github Workflow - Step 12
  5. Enter the same tag version string into the Release Title Github Workflow - Step 13
  6. Github Workflow - Step 17
  7. Go to any service that requires this package in its bower.json or any other dependency-documenting file and bump the version!

Dependencies

This library depends on a few others that you'll have to import into your scripts or include in your build, they are:

https://github.com/citizennet/cn-util.git
https://github.com/citizennet/cn-datetimepicker.git
https://github.com/citizennet/cn-tags-input.git
https://github.com/citizennet/angular-schema-form.git

Using

Add it as a dependency for your angular app:

angular.module("yourapp", ["cn.flex-form"]);

Define the form config in your controller:

vm.config = {
    formCtrl: vm.ffForm,
    schema: vm.schema,
    getSchema: vm.getSchema
};

Invoke the form in your template:

<div name="{{vm.ffForm}}">
    <cn-flex-form
        ff-config="vm.config"
        ff-model="vm.model"
    </cn-flex-form>
</div>