<api-url-params-editor>
An element to render query / URI parameters form from AMF data model.
It also allows to create custom query parameters list, outside schema definition, when allowCustom property is set.
It uses api-url-data-model to transform AMF model to the view model recognized by this element.
The main task of the element is to produce / update view model for both query / URI parameters so it can be used by the URL editor to create final request URL value.
<api-url-params-editor
querymodel="..."
pathmodel="..."
></api-url-params-editor>Version compatibility
This version only works with AMF model version 2 (AMF parser >= 4.0.0).
For compatibility with previous model version use 3.x.x version of the component.
Usage
Installation
npm install --save @api-components/api-url-params-editor
In an html file
<html>
<head>
<script type="module">
import '@api-components/api-url-params-editor/api-url-params-editor.js';
</script>
</head>
<body>
<api-url-params-editor></api-url-params-editor>
<script>
{
const editor = document.querySelector('api-url-params-editor');
editor.onurivalue = (e) {
console.log('URI values', e.detail.value);
};
editor.onqueryvalue = (e) {
console.log('Query values', e.detail.value);
};
}
</script>
</body>
</html>In a LitElement
import { LitElement, html } from 'lit-element';
import '@api-components/api-url-params-editor/api-url-params-editor.js';
class SampleElement extends PolymerElement {
render() {
return html`
<api-url-params-editor
.queryModel="${this.queryModel}"
.pathModel="${this.pathModel}"
@queryvalue-changed="${this._queryValueChanged}"
@urivalue-changed="${this._uriValueChanged}"
@urimodel-changed="${this._pathModelChangeHandler}"
@querymodel-changed="${this._queryModelChangeHandler}"></api-url-params-editor>
`;
}
_queryValueChanged(e) {
this.queryValues = e.detail.value;
}
_uriValueChanged(e) {
this.uriValues = e.detail.value;
}
_pathModelChangeHandler(e) {
this.pathViewModel = e.detail.value;
}
_queryModelChangeHandler(e) {
this.queryViewModel = e.detail.value;
}
}
customElements.define('sample-element', SampleElement);Passing AMF data model
The component does not directly interact with AMF model. It uses a view model generated by api-url-data-model. This element parses API spec to produce basic information about currently selected endpoint like path variables model, query parameters model, and base URI.
Your UI has to provide a way to select an endpoint. You can use api-navigation element which renders API structure in a nav bar and dispatches selection event.
In an html file
<api-url-editor></api-url-editor>
<api-url-params-editor></api-url-params-editor>
<api-url-data-model></<api-url-data-model>
<script type="module">
import '@api-components/api-url-editor/api-url-editor.js';
import '@api-components/api-url-params-editor/api-url-params-editor.js';
import '@api-components/api-url-data-model/api-url-data-model.js';
{
const api = await generateApiModel();
const selectedEndpoint = 'amf://id#63'; // some ID from the AMF model for endpoint / operation
const model = document.querySelector('api-url-data-model');
model.amf = api; // This is required to compute ld+json keys!
model.selected = selectedEndpoint;
const urlEditor = document.querySelector('api-url-editor');
urlEditor.baseUri = model.apiBaseUri;
urlEditor.endpointPath = model.endpointPath;
urlEditor.queryModel = model.queryModel;
urlEditor.pathModel = model.pathModel;
const editor = document.querySelector('api-url-params-editor');
urlEditor.queryModel = model.queryModel;
urlEditor.uriModel = model.pathModel;
urlEditor.onquerymodel = (e) => {
urlEditor.queryModel = e.detail.value;
};
urlEditor.onurimodel = (e) => {
urlEditor.pathModel = e.detail.value;
};
}
</script>Development
git clone https://github.com/advanced-rest-client/api-url-params-editor
cd api-url-params-editor
npm installRunning the demo locally
npm startRunning the tests
npm test