Panels

Settings

The Settings Panel allows the user to change different settings within Sprocket Pan. Settings are per-workspace. The Settings Panel can be opened with the gear button in the toolbar.

Whenever a setting is changed, the buttons in the bottom life corner will change to Cancel and Apply respectively. Click the Cancel button to clear all changes, or the Apply button to save changes.

There are three sub-sections within the settings panel - general, requests, and data.

General

In the general settings menu, you can control the window zoom, the system theme (dark or light mode), and how you want variables to be displayed. The variable display setting is used for environment variables. The below example(s) show what it looks like for each setting:

• Key and Value

• Value Only

Requests

The request settings menu has the options for the network call timeout duration, the maximum number of history records, and the script strategy order (this is the order in which scripts will execute).

Data

The data folder deals with saving, quitting to the workspace selection screen, and opening the data folder in your system's file explorer. You will rarely need to do this, but the Open Data Folder button will open the location of all of the data in Sprocket Pan in your system's file explorer. You can also export your workspace so that others can access it. If you export without environment variables, the keys will be kept but the values for your environment variables will be empty.

Environment

The environment panel allows for editing of environments.

(1) The Title

• This text is editable. The title does not need to be unique, but it is reccomended to give it a unique and recognziable name.

(2) Selected Checkmark Toggle

• Click this to toggle whether the environment is selected. Selecting an environment will also un-select all other environments since a maximum of one environment can be selected at any one time.

(3) View/Edit toggle

• Toggle between view and edit mode. The default mode, edit mode, will function as normal. View mode switches the editor to read-only, and replaces all references to environment variables with their resolved value.

Edit ModeView Mode

(4) Clear Changes

• Clears all unsaved changes, reverting the editor to its untouched state.

(5) Save Changes

• Saves all unsaved changes. Note that this will not save to disk, only memory. If you'd like to save to disk, the save button in the floating toolbar (top-left), is how to do it.

(6) Copy to clipboard

• Copies the environment text to the clipboard.

(7) Format

• Formats the text in the editor.

(8) Environment Editor

• A monaco (vscode) JSON editor for the environment variables. Only supports string keys and string values.

Script

The script panel allows for the editing of standalone-scripts.

(1) The Title

• This text is editable. The title does not need to be unique, but it is reccomended to give it a unique and recognziable name.

(2) Script-Callable Name

• The name that will be used when referencing this script in any script. This name must be unique, and be a valid variable name in Typescript.

(3) Script Return Variable

• The name of the variable this script returns. This value can be blank. If it is not, then whenever this script is called, it will return the selected variable wrapped in a Promise.

(4) Run

• Runs the script as is, and outputs the script's return variable, if it exists.

(5) Format

• Formats the text in the editor.

(6) Copy to clipboard

• Copies the script text to the clipboard.

(7) Script Editor

• A monaco (vscode) Typescript editor for the environment variables.

(8) Return Variable Output

• Shows the script's return variable's value, if it exists, once a script has been run.

Service

The service panel allows for editing services.

(1) The Title

• This text is editable. The title does not need to be unique, but it is reccomended to give it a unique and recognziable name.

(2) Description

• A description of the service. Be as verbose or succinct as you wish. Displays in markdown.

(3) Information Table

• General information about the service. The baseurl will be prepended to all requests, and you can use environment variables.

(4) Environments

• Services can have environments local to that service. Click the first circle button to select or deselect the environment. The next button will allow you to duplicate the local environment, and the third button is for deleting the local environment. The buttons/features are otherwise exactly the same as the Environment Panel

(5) Pre- and Post-Request Scripts

• Scripts that will run before and after any request is run in the service.

(6) Recent Requests

• A list of the most recent requests that were called, with the date they were last used and a link to open their Request Panel

Endpoint

The endpoint panel allows for editing endpoints.

(1) The Title

• This text is editable. The title does not need to be unique, but it is reccomended to give it a unique and recognziable name.

(2) Request Method

• The RESTful Request Method. Click the dropdown to select the method to send.

(3) Endpoint URL

• You can specify the additional url/uri string here. Each Endpoint corresponds to a unique URL of a service.

(4) Options Tabs

• The three tabs you can work in: Headers, Query Params, and Scripts

HeadersQuery ParamsScripts

• Headers to add to every request on this endpoint. This panel is exactly the same as the Environment

• Query params to add to every request on this endpoint. Unlike other key-value-pair JSON editors, this editor can include arrays.

• Similar to Services and Requests, you can have a script run before or after a request on this endpoint is sent.

(5) Jump to Request

• Endpoints are a collection of requests. You cannot send a request from an Endpoint. If an Endpoint has a default Request, this button will open up that request.

Request

The request panel allows for editing and sending requests.

(1) The Title

• This text is editable. The title does not need to be unique, but it is reccomended to give it a unique and recognziable name.

(2) Request Method [Read-Only]

• The RESTful request method used. You can't edit this in the request panel, you must go into the Endpoint to change this.

(3) Full URL [Read-Only]

• Full URL that the request will call. You can't edit this in the request panel, you must go into the Endpoint to change this. However, you can add query parameters to this specific request, which will show up as part of the full URL.

(4) Send Request

• Button to send the request.

(5) Edit Endpoint

• This button will allow you to edit the Endpoint that this request is a part of.

(6) Copy Request ID

• This button will add the unique identifier of this request to your clipboard. This functionality is only needed for advanced users who wish to programatically send a request.

(7) Default Toggle

• Toggle this on or off to set/unset this request as the default for its endpoint.

(8) Request Details Section

• Here you can edit different facets of the request.

BodyHeadersQuery ParamsScriptsEnvironment

• The request body. Sprocket Pan currently supports form data and raw data. The raw data can be Text, JSON, JavaScript, HTML, XML or Yaml. File sending is not currently supported but it is a top priority, so stay tuned.

• The headers to send in the request.

• The query parameters to send in the request. You can include arrays in the JSON editor for query parameters.

• Any query params you add will show up in the full URL.

• Pre- and Post- Request scripts at the request level.

• The environment variables for this request. Note that these values will override any service or global environment variables with the same name.

(9) Response Details Section

• The response details section can be split into two groups, the history header, and the response details.

History Header

• Past responses are saved, up to a maximum number configurable in the settings. The history header displays and controls the responses.

(1) Response Timestamp

• The exact time the response was recieved.

(2) Diff Viewer

• Opens the Diff Viewer. See Diff Viewer

(3) History Navigation

• Controls to navigate between different items in the response history.

(4) Delete History Item

• Button to delete the current history item.

Response Details

BodyDetailsRequestEvent Log

• The response body of the request, as well as the status code. This editor is read-only.

• Includes details about the response, including recieve and transit time, response code, and response headers.

• Includes details about the request sent for this specific response, including the request's method, url, headers, and body.

• Shows the audit/event log for this response. Every time a script is called or a network request is sent, a log of that event will be added. If a script calls another script or sends another request, the logs for those actions will be indented such that they are a subset of that script.

• If a script or request is different from the current request selected, you can click the blue navigation button next to the name of the script or request to open its corresponding tab.

Diff Viewer

• The Diff Viewer, or Diff Tool, allows you to see the exact differences between two specific responses.

(1) Service Select Dropdown (Each Side)

• Here you can select the service of the responses that you are comparing for each side.

(2) Endpoint Select Dropdown (Each Side)

• Here you can select the endpoint of the responses that you are comparing for each side.

(3) Request Select Dropdown (Each Side)

• Here you can select the request of the responses that you are comparing for each side.

(4) Response History Selection (Each Side)

• Here you can select the specific response item in the request's history for each side.

(5) Response Differences

• Once a response item is selected for both sides, you will be able to view the differences between the responses - split into multiple tabs.

Layout Terminology