Neolithic Programming Machine
    Wondering what’s next for npm?Check out our public roadmap! »

    This package has been deprecated

    Author message:

    This element is deprecated. Use @advanced-rest-client/requests-list instead

    TypeScript icon, indicating that this package has built-in type declarations

    3.0.1 • Public • Published

    Published on NPM

    Build Status


    Advanced REST Client saved requests screen.

    This element extends @advanced-rest-client/history-panel.



    npm install --save @advanced-rest-client/saved-requests-panel

    Saved requests screen comes with 2 predefied styles:

    • Material - Normal state
    • Compatibility - To provide compatibility with Anypoint design

    In a LitElement

    import { LitElement, html } from 'lit-element';
    import '@advanced-rest-client/saved-requests-panel/saved-requests-panel.js';
    import './node_modules/@advanced-rest-client/arc-models/project-model.js';
    import './node_modules/@advanced-rest-client/arc-models/request-model.js';
    import './node_modules/@advanced-rest-client/arc-data-export/arc-data-export.js';
    class SampleElement extends LitElement {
      get styles() {
        return css`
          saved-requests-panel {
            height: 500px;
      render() {
        return html`
        <saved-requests-panel draggableenabled></saved-requests-panel>
        <!-- Handles datastore and export events -->
    customElements.define('sample-element', SampleElement);

    List sizing

    It is important to set implicit height of the element. It can be static value like 500px, relative value like 100% as long as a parent is sized for height, or a flex value, as long as parent is sized for height. The list of requests is set to load only portion of the requests from the data store and load more when list scroll is near end. If there's no scroll then the element will load whole data store at initialization time.

    Drag and drop

    API components related to a request object support drag and drop. Set draggableenabled property to enable the support.

    The DataTransfer property of the drag event contains effectAllowed set to copy as this is only allowed operation on a saved object. Only targets that allow the same effect will accept the saved item. The same propery contains serialized request data under arc/request-object media type. It contains request ID under arc/saved-request and arc-source/saved-panel media types.

    _dropHandler(e) {
      const data = e.dataTransfer.getData('arc/request-object');
      const request = JSON.parse(data);
      const id = e.dataTransfer.getData('arc/saved-request');
      console.log(request, id);


    git clone
    cd saved-requests-panel
    npm install

    Running the tests

    npm test

    API components

    This components is a part of API components ecosystem


    npm i @advanced-rest-client/saved-requests-panel

    DownloadsWeekly Downloads






    Unpacked Size

    69.2 kB

    Total Files


    Last publish


    • avatar
    • avatar
    • avatar
    • avatar