@advanced-rest-client/form-data-editor
Advanced tools
An element to edit form data (x-www-form-urlencoded)
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>
npm install --save @advanced-rest-client/form-data-editor
<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>
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);
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.
When set is renders "add parameter" button and allows to create new form value. Mandatory for stand-alone use.
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.
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>
git clone https://github.com/advanced-rest-client/form-data-editor
cd form-data-editor
npm install
npm start
npm test
This components is a part of API components ecosystem
FAQs
An element to edit form data (x-www-form-urlencoded)
The npm package @advanced-rest-client/form-data-editor receives a total of 619 weekly downloads. As such, @advanced-rest-client/form-data-editor popularity was classified as not popular.
We found that @advanced-rest-client/form-data-editor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers discovered nine malicious NuGet packages that use time-delayed payloads to crash applications and corrupt industrial control systems.
Security News
Socket CTO Ahmad Nassri discusses why supply chain attacks now target developer machines and what AI means for the future of enterprise security.
Security News
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.