{"id":42116414,"url":"https://github.com/susom/redcap-em-shazam","last_synced_at":"2026-01-26T14:09:34.271Z","repository":{"id":45965290,"uuid":"107158446","full_name":"susom/redcap-em-shazam","owner":"susom","description":"Shazam External Module","archived":false,"fork":false,"pushed_at":"2024-08-20T21:34:17.000Z","size":1007,"stargazers_count":18,"open_issues_count":9,"forks_count":11,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-08-20T23:24:12.733Z","etag":null,"topics":["redcap","redcap-external-module","redcap-repo"],"latest_commit_sha":null,"homepage":"","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/susom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-16T17:11:26.000Z","updated_at":"2024-08-20T21:33:41.000Z","dependencies_parsed_at":"2024-08-20T23:26:18.114Z","dependency_job_id":null,"html_url":"https://github.com/susom/redcap-em-shazam","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"purl":"pkg:github/susom/redcap-em-shazam","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susom%2Fredcap-em-shazam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susom%2Fredcap-em-shazam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susom%2Fredcap-em-shazam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susom%2Fredcap-em-shazam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/susom","download_url":"https://codeload.github.com/susom/redcap-em-shazam/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susom%2Fredcap-em-shazam/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28780259,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T13:55:28.044Z","status":"ssl_error","status_checked_at":"2026-01-26T13:55:26.068Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["redcap","redcap-external-module","redcap-repo"],"created_at":"2026-01-26T14:09:34.202Z","updated_at":"2026-01-26T14:09:34.255Z","avatar_url":"https://github.com/susom.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shazam External Module\n\nThere is additional documentation to help you configure this once installed.\n\n### What does it do?\nThis module allows you to create custom instrument layouts, similar to custom input matrixes.  You can arrange dropdown, radio, input, and other fields into a custom html element and insert that into your instrument.\n\nIt does require a little bit of HTML skill, but you can do simple things like this:\n\n![Example Table](assets/example_table.png)\n\nOr, you can get much more creative:\n\n![Example Complex](assets/example_complex_field.png)\n\nOr, you can go crazy as in this side-by-side radio example:\n\n![Example Side By Side](assets/example_side_by_side.png)\n\nThe way this works is to insert a 'descriptive' field on your form where you want to put the custom table.\n\nNext, you set up the external module and define your custom HTML.  Here is an example:\n\n```html\n\u003ctable class='fy_summary'\u003e\n    \u003ctr\u003e\n        \u003cth\u003e\u003c/th\u003e\n        \u003cth\u003e2012\u003c/th\u003e\n        \u003cth\u003e2013\u003c/th\u003e\n        \u003cth\u003e2014\u003c/th\u003e\n        \u003cth\u003e2015\u003c/th\u003e\n        \u003cth\u003e2016\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth\u003eFederal Grants\u003c/th\u003e\n        \u003ctd\u003e\u003cdiv class='shazam shazam-icons'\u003efed_grants_fy12\u003c/div\u003e\u003c/td\u003e \u003c!-- including shazam-icons will add the history / data quality icons --\u003e\n        \u003ctd\u003e\u003cdiv class='shazam'\u003efed_grants_fy13\u003c/div\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cdiv class='shazam'\u003efed_grants_fy14\u003c/div\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cdiv class='shazam'\u003efed_grants_fy15\u003c/div\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cdiv class='shazam'\u003efed_grants_fy16\u003c/div\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003cth class='shazam'\u003enf_grants:label\u003c/th\u003e \u003c!-- This will map the LABEL to the field nf_grants --\u003e\n        \u003ctd class='shazam'\u003enf_grants_fy12\u003c/td\u003e\n        \u003ctd class='shazam'\u003enf_grants_fy13\u003c/td\u003e\n        \u003ctd class='shazam'\u003enf_grants_fy14\u003c/td\u003e\n        \u003ctd class='shazam'\u003enf_grants_fy15\u003c/td\u003e\n        \u003ctd class='shazam'\u003enf_grants_fy16\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003cth\u003eResearch Agreements/Contracts\u003c/th\u003e\n        \u003ctd class='shazam'\u003ersch_contract_fy12\u003c/td\u003e\n        \u003ctd class='shazam'\u003ersch_contract_fy13\u003c/td\u003e\n        \u003ctd class='shazam'\u003ersch_contract_fy14\u003c/td\u003e\n        \u003ctd class='shazam'\u003ersch_contract_fy15\u003c/td\u003e\n        \u003ctd class='shazam'\u003ersch_contract_fy16\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr data-shazam-mirror-visibility=\"clinical_trials\"\u003e \u003c!-- This will make this entire TR only visible when the field 'clinical_trials' is visible --\u003e\n        \u003cth\u003eClinical Trials\u003c/th\u003e\n        \u003ctd class='shazam'\u003ect_fy12\u003c/td\u003e\n        \u003ctd class='shazam'\u003ect_fy13\u003c/td\u003e\n        \u003ctd class='shazam'\u003ect_fy14\u003c/td\u003e\n        \u003ctd class='shazam'\u003ect_fy15\u003c/td\u003e\n        \u003ctd class='shazam'\u003ect_fy16\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n```\n\nThen, to make customization easier, you can use CSS instead of in-line CSS to tweak the look and feel.\n\n![Example CSS](assets/example_css.png)\n\nIt also supports the ability to hide and show some of your custom elements based on other branched REDCap elements.\nThis means you could make a complex table and be able to hide/show rows of that table based on another REDCap field -\nsimilar to how one can do branching on rows in an input matrix.\n\nJavascript can only be added/edited/removed by a superuser to prevent users from doing bad things :-)\n\nHave fun!\n\n\n### Advanced Tricks ###\n\nIn some cases I've needed to have another javascript function do something to the DOM AFTER shazam has fired.  So, I added\na callback that you can register from the 'other' EM... Shazam will then call this function before it visualizes the modified DOM.\n\nFor example:\n```javascript\n// In another module that writes something to the client\n$(document.ready( function() {\n    // Register the Shazam callback\n    Shazam.beforeDisplayCallback = function() {\n        console.log ('This function will get called AFTER Shazam has rearranged the DOM just before it shows the page to the end-user');\n    }\n});\n```\n\n### Example Projects\nHere is a consortium post with a nice example:\nhttps://community.projectredcap.org/content/idea/78670/shazam-sample-project.html\n\nAlso, there is a project xml file built into this project here:\n[Example xml](assets/example_project_xml/ShazamTestProject.REDCap.xml)\nwith instructions:\n[Instructions](assets/example_project_xml/configuration.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsusom%2Fredcap-em-shazam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsusom%2Fredcap-em-shazam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsusom%2Fredcap-em-shazam/lists"}