https://github.com/susom/redcap-em-shazam
Shazam External Module
https://github.com/susom/redcap-em-shazam
redcap redcap-external-module redcap-repo
Last synced: 5 months ago
JSON representation
Shazam External Module
- Host: GitHub
- URL: https://github.com/susom/redcap-em-shazam
- Owner: susom
- License: mit
- Created: 2017-10-16T17:11:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-20T21:34:17.000Z (almost 2 years ago)
- Last Synced: 2024-08-20T23:24:12.733Z (almost 2 years ago)
- Topics: redcap, redcap-external-module, redcap-repo
- Language: JavaScript
- Homepage:
- Size: 983 KB
- Stars: 18
- Watchers: 13
- Forks: 11
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shazam External Module
There is additional documentation to help you configure this once installed.
### What does it do?
This 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.
It does require a little bit of HTML skill, but you can do simple things like this:
Or, you can get much more creative:
Or, you can go crazy as in this side-by-side radio example:
The way this works is to insert a 'descriptive' field on your form where you want to put the custom table.
Next, you set up the external module and define your custom HTML. Here is an example:
```html
2012
2013
2014
2015
2016
Federal Grants
fed_grants_fy13
fed_grants_fy14
fed_grants_fy15
fed_grants_fy16
nf_grants:label
nf_grants_fy12
nf_grants_fy13
nf_grants_fy14
nf_grants_fy15
nf_grants_fy16
Research Agreements/Contracts
rsch_contract_fy12
rsch_contract_fy13
rsch_contract_fy14
rsch_contract_fy15
rsch_contract_fy16
Clinical Trials
ct_fy12
ct_fy13
ct_fy14
ct_fy15
ct_fy16
```
Then, to make customization easier, you can use CSS instead of in-line CSS to tweak the look and feel.
It also supports the ability to hide and show some of your custom elements based on other branched REDCap elements.
This means you could make a complex table and be able to hide/show rows of that table based on another REDCap field -
similar to how one can do branching on rows in an input matrix.
Javascript can only be added/edited/removed by a superuser to prevent users from doing bad things :-)
Have fun!
### Advanced Tricks ###
In some cases I've needed to have another javascript function do something to the DOM AFTER shazam has fired. So, I added
a callback that you can register from the 'other' EM... Shazam will then call this function before it visualizes the modified DOM.
For example:
```javascript
// In another module that writes something to the client
$(document.ready( function() {
// Register the Shazam callback
Shazam.beforeDisplayCallback = function() {
console.log ('This function will get called AFTER Shazam has rearranged the DOM just before it shows the page to the end-user');
}
});
```
### Example Projects
Here is a consortium post with a nice example:
https://community.projectredcap.org/content/idea/78670/shazam-sample-project.html
Also, there is a project xml file built into this project here:
[Example xml](assets/example_project_xml/ShazamTestProject.REDCap.xml)
with instructions:
[Instructions](assets/example_project_xml/configuration.md)