{"id":27742350,"url":"https://github.com/mikekelly/hal-browser","last_synced_at":"2025-12-17T03:56:22.947Z","repository":{"id":1056249,"uuid":"4158450","full_name":"mikekelly/hal-browser","owner":"mikekelly","description":"An API browser for the hal+json media type","archived":false,"fork":false,"pushed_at":"2024-04-23T12:03:35.000Z","size":543,"stargazers_count":841,"open_issues_count":39,"forks_count":157,"subscribers_count":54,"default_branch":"master","last_synced_at":"2025-04-28T16:57:00.247Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mikekelly.png","metadata":{"files":{"readme":"README.adoc","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-04-27T13:18:40.000Z","updated_at":"2025-04-14T11:25:04.000Z","dependencies_parsed_at":"2022-08-16T11:55:18.314Z","dependency_job_id":null,"html_url":"https://github.com/mikekelly/hal-browser","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mikekelly/hal-browser","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikekelly%2Fhal-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikekelly%2Fhal-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikekelly%2Fhal-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikekelly%2Fhal-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikekelly","download_url":"https://codeload.github.com/mikekelly/hal-browser/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikekelly%2Fhal-browser/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27776777,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-17T02:00:08.291Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-28T16:39:50.345Z","updated_at":"2025-12-17T03:56:22.932Z","avatar_url":"https://github.com/mikekelly.png","language":"JavaScript","funding_links":[],"categories":["Documentation Templates"],"sub_categories":[],"readme":"= HAL-browser\n\nAn API browser for the hal+json media type\n\n== Example Usage\n\nHere is an example of a hal+json API using the browser:\n\nhttp://haltalk.herokuapp.com/explorer/browser.html[http://haltalk.herokuapp.com/explorer/browser.html]\n\n== About HAL\n\nHAL is a format based on json that establishes conventions for\nrepresenting links. For example:\n\n[source,javascript]\n----\n{\n    \"_links\": {\n        \"self\": { \"href\": \"/orders\" },\n        \"next\": { \"href\": \"/orders?page=2\" }\n    }\n}\n----\n\nMore detail about HAL can be found at\nhttp://stateless.co/hal_specification.html[http://stateless.co/hal_specification.html].\n\n== Customizing the POST form\n\nBy default, the HAL Browser can't assume there is any metadata. When you click on the non-GET request button (to create a new resource), the user must enter the JSON document to submit. If your service includes metadata you can access, it's possible to plugin a custom view that makes use of it.\n\n. Define your custom view.\n+\nHere is an example that leverages Spring Data REST's JSON Schema metadata found at */{entity}/schema*.\n+\n[source,javascript]\n----\nvar CustomPostForm = Backbone.View.extend({\n\tinitialize: function (opts) {\n\t\tthis.href = opts.href.split('{')[0];\n\t\tthis.vent = opts.vent;\n\t\t_.bindAll(this, 'createNewResource');\n\t},\n\n\tevents: {\n\t\t'submit form': 'createNewResource'\n\t},\n\n\tclassName: 'modal fade',\n\n\tcreateNewResource: function (e) {\n\t\te.preventDefault();\n\n\t\tvar self = this;\n\n\t\tvar data = {}\n\t\tObject.keys(this.schema.properties).forEach(function(property) {\n\t\t\tif (!(\"format\" in self.schema.properties[property])) {\n\t\t\t\tdata[property] = self.$('input[name=' + property + ']').val();\n\t\t\t}\n\t\t});\n\n\t\tvar opts = {\n\t\t\turl: this.$('.url').val(),\n\t\t\theaders: HAL.parseHeaders(this.$('.headers').val()),\n\t\t\tmethod: this.$('.method').val(),\n\t\t\tdata: JSON.stringify(data)\n\t\t};\n\n\t\tvar request = HAL.client.request(opts);\n\t\trequest.done(function (response) {\n\t\t\tself.vent.trigger('response', {resource: response, jqxhr: jqxhr});\n\t\t}).fail(function (response) {\n\t\t\tself.vent.trigger('fail-response', {jqxhr: jqxhr});\n\t\t}).always(function () {\n\t\t\tself.vent.trigger('response-headers', {jqxhr: jqxhr});\n\t\t\twindow.location.hash = 'NON-GET:' + opts.url;\n\t\t});\n\n\t\tthis.$el.modal('hide');\n\t},\n\n\trender: function (opts) {\n\t\tvar headers = HAL.client.getHeaders();\n\t\tvar headersString = '';\n\n\t\t_.each(headers, function (value, name) {\n\t\t\theadersString += name + ': ' + value + '\\n';\n\t\t});\n\n\t\tvar request = HAL.client.request({\n\t\t\turl: this.href + '/schema',\n\t\t\tmethod: 'GET'\n\t\t});\n\n\t\tvar self = this;\n\t\trequest.done(function (schema) {\n\t\t\tself.schema = schema;\n\t\t\tself.$el.html(self.template({\n\t\t\t    href: self.href,\n\t\t\t    schema: self.schema,\n\t\t\t    user_defined_headers: headersString}));\n\t\t\tself.$el.modal();\n\t\t});\n\n\t\treturn this;\n\t},\n\ttemplate: _.template($('#dynamic-request-template').html())\n});\n----\n+\n. Register it by assigning to `HAL.customPostForm`\n+\n[source,javascript]\n----\nHAL.customPostForm = CustomPostForm;\n----\n+\n. Load your custom JavaScript component and define your custom HTML template.\n+\n[source,html,indent=0]\n----\n\u003cscript id=\"dynamic-request-template\" type=\"text/template\"\u003e\n\u003cdiv class=\"modal-header\"\u003e\n  \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"\u003e\u0026times;\u003c/button\u003e\n  \u003ch3\u003eMake a non-GET request\u003c/h3\u003e\n\u003c/div\u003e\n\n\u003cform class=\"non-safe\" action=\"\u003c%= href %\u003e\"\u003e\n  \u003cdiv class=\"modal-body\"\u003e\n    \u003cp\u003eTarget URI\u003c/p\u003e\n    \u003cinput name=\"url\" type=\"text\" class=\"url\" value=\"\u003c%= href %\u003e\" /\u003e\n    \u003cp\u003eMethod:\u003c/p\u003e\n    \u003cinput name=\"method\" type=\"text\" class=\"method\" value=\"POST\" /\u003e\n    \u003cp\u003eHeaders:\u003c/p\u003e\n    \u003ctextarea name=\"headers\" class=\"headers\" style=\"height: 100px\"\u003e\n    Content-Type: application/json\n    \u003c%= user_defined_headers %\u003e\n    \u003c/textarea\u003e\n  \u003c/div\u003e\n  \u003c% _.each(schema.properties, function(value, name) { %\u003e\n    \u003c% if (!(\"format\" in value)) { %\u003e\n      \u003cinput type=\"text\" placeholder=\"\u003c%= name %\u003e\" name=\"\u003c%= name %\u003e\" /\u003e\n    \u003c% } %\u003e\n  \u003c% }); %\u003e\n  \u003cdiv class=\"modal-footer\"\u003e\n    \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eMake Request\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n\u003c/script\u003e\n----\n\nNOTE: To load a custom JavaScript module AND a custom HTML template, you will probably need to create a customized version of `browser.html`.\n\nNOTE: The HAL Browser uses a global `HAL` object, so there is no need to deal with JavaScript packages.\n\n== Usage Instructions\n\nAll you should need to do is copy the files into your webroot.\nIt is OK to put it in a subdirectory; it does not need to be in the root.\n\nAll the JS and CSS dependencies come included in the vendor directory.\n\n== TODO\n\n* Provide feedback to user when there are issues with response (missing\nself link, wrong media type identifier)\n* Give 'self' and 'curies' links special treatment","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikekelly%2Fhal-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikekelly%2Fhal-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikekelly%2Fhal-browser/lists"}