@advanced-rest-client/form-data-editor
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.10 • Public • Published

    Published on NPM

    Tests and publishing

    <form-data-editor>

    An element to edit form data (x-www-form-urlencoded).

    The element renders a form that allows to enter form data values.

    It may be used with AMF json/ld model via api-view-model-transformer to transform AMF model to the data view model.

    <form-data-editor value="grant_type=authorization_code&code=SplxlOBeZQQYbYS6WxSbIA&redirect_uri=https%3A%2F%2Fclient%2Eexample%2Ecom%2Fcb" allowcustom allowdisableparams allowhideoptional></form-data-editor>

    Usage

    Installation

    npm install --save @advanced-rest-client/form-data-editor
    

    In an html file

    <html>
      <head>
        <script type="module">
          import '@advanced-rest-client/form-data-editor/form-data-editor.js';
        </script>
      </head>
      <body>
        <form-data-editor allowcustom allowdisableparams></form-data-editor>
        <script>
        {
          const editor = document.querySelector('api-url-params-editor');
          editor.onchange = (e) {
            console.log('Payload value', e.target.value); // or e.detail.value
          };
          editor.onmodel = (e) {
            console.log('View model', e.target.model); // or e.detail.value
          };
        }
        </script>
      </body>
    </html>

    In a LitElement

    import { LitElement, html } from 'lit-element';
    import '@advanced-rest-client/form-data-editor/form-data-editor.js';
    
    class SampleElement extends PolymerElement {
      render() {
        return html`
        <form-data-editor
          .value="${this.payloadValues}"
          .model="${this.viewModel}"
          @value-changed="${this._valueHandler}"
          @model-changed="${this._modelHandler}"></form-data-editor>
        `;
      }
    
      _valueHandler(e) {
        this.payloadValues = e.detail.value;
      }
    
      _modelHandler(e) {
        this.viewModel = e.detail.value;
      }
    }
    customElements.define('sample-element', SampleElement);

    Behaviour controls

    allowDisableParams

    When set it renders a checkbox next to each for item that allows to disable the item. The item is in the view and in generated data mode but is ignored when producing the value.

    allowCustom

    When set is renders "add parameter" button and allows to create new form value. Mandatory for stand-alone use.

    allowHideOptional

    When item.required model property is not set and this value is set then it hides all optional items (not marked as required) and renders a checkbox to render hidden items in the view.

    <form-data-editor allowhideoptional></form-data-editor>
    <script>
    {
      document.querySelector('form-data-editor').model = [
        {
          name: 'param1',
          value: 'value1',
          required: true
        },
        {
          name: 'param2',
          value: 'value2',
          required: false
        }
      ];
    }
    </script>

    This editor renders only param1 parameter and hides param2 form item. The user can render hidden items at any time.

    Generating view model from AMF model

    You can produce the view model from model generated by AMF parser via api-view-model-transformer element. This element produces common model for query parameters, URI parameters, body, and headers.

    <api-view-model-transformer></api-view-model-transformer>
    <form-data-editor></form-data-editor>
    
    <script>
    {
      const api = await generateApiModel();
      const endpoint = '/api-endpoint';
      const operation = 'GET';
      const bodyParametersModelArray = getOperationRequestBodyFromModel(api, endpoint, operation); // some abstract method
      const transformer = document.querySelector('api-view-model-transformer');
      transformer.api = api; // This is required to compute ld+json keys!
      const viewModel = transformer.computeViewModel(bodyParametersModelArray);
      document.querySelector('form-data-editor').model = viewModel;
    }
    </script>

    Development

    git clone https://github.com/advanced-rest-client/form-data-editor
    cd form-data-editor
    npm install

    Running the demo locally

    npm start

    Running the tests

    npm test

    API components

    This components is a part of API components ecosystem

    Install

    npm i @advanced-rest-client/form-data-editor

    DownloadsWeekly Downloads

    350

    Version

    3.0.10

    License

    Apache-2.0

    Unpacked Size

    74.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • carowright
    • jarrodek
    • twoplustwoone
    • lbauret