Grouper Developers Forum

[Chris Hyzer <>]

Hey,

I briefly mentioned this before, and have started working on it. This is a screen that allows external applications to grouper (or grouper itself), to have a subject picker in the grouper ui. Initially I would like to use this in Kuali workflow edoclite, but it could be used anywhere.

This is the design, let me know any feedback.

1. If you have SSO the usability will be better (i.e. when the popup appears, the user will already be logged in)

2. You are on a screen where you need to find a person (e.g. I will have a Kuali Rice workflow screen where the submitter needs to select his/her supervisor. The end result is a hidden field with the userId (e.g. 12345678), and a label which shows the description. e.g.
   
   John Smith (jsmith, 12345678) employee, engineering school IT department technical director (ACTIVE)
   

   There is a button on the application which lets the user select a user. (see screenshot #1)
   
   <button = window.open('http://localhost:8091/grouper/grouperUi/appHtml/grouper.html?operation=SubjectPicker.index&subjectPickerName=whatever&subjectPickerElementName=subject1','newWindow', 'scrollbars,resizable'); theWindow.focus(); return false;">Find person</button>
   

3. Then you see a popup which is from the grouper ui (see screenshot #2). This is like the lite Ui, ajax, etc. The text and features (and CSS) can be customized per app using it.
4. Search for a user (screenshot #3).  This is an ajax request.
5. Select a user and a _javascript_ function is called in the application which can set the subjectId / display string to the screen (or actually any subject property or attribute if configured to be allowed
   
   

   <script>

     function grouperSubjectSelected(elementName,subjectId,subjectDescription, pickerResultSubject) {

       subjectDescription = escapeHtml(subjectDescription);

       subjectId = escapeHtml(subjectId);

       document.getElementById(elementName + "DescriptionSpanId").innerHTML = subjectDescription;

       if (elementName == 'subject1') {

         document.getElementById(elementName + "IdSpanId").innerHTML = subjectId;

       } else if (elementName == 'subject2') {

         document.getElementById(elementName + "IdSpanId").value = subjectId;

       } else {

         alert("ERROR: Cant find elementName: " + elementName);

       }

     }

     /** convert input into a non-null string */

     function escapeHtml(input) {

       input = input.replace(/&/g, "&amp;");

       input = input.replace(/</g, "&lt;");

       input = input.replace(/>/g, "&gt;");

       return input;

     }

   </script>

6. You see the application screen change (see attachment #4), probably a label on the screen and a hidden field for the subject id or whatever.
   
   

The config options will have defaults for all subject pickers, and you can customize for each one.  All the text, the way the subjects are displayed, the CSS, what is returned to the calling application, which sources are searched, which group the results must be in, which group the user must be in, etc.

I picture the configs to be on the classpath or in a directory (specified in media.properties).  If you do nothing, no subject pickers will be enabled, you need to add a config file for one to be used.  There isnt really a way to know which app the subject picker is used from, this is how internet applications work.

 

I think in general s subject picker is more of an IdM thing, and not a group thing, but since you can control which group the user and results need to be in, it is related to group management (and for institutions where there isnt an IdM equivalent).  It is a downside that the application relies on the Grouper UI being available...   Also, the browser support list of the Grouper UI will limit the calling application.

 

Anyways, let me know your thoughts or if anyone might be able to use this.

 

Thanks,

Chris

 

 

Attachment: 1_app.gif
Description: 1_app.gif

Attachment: 2_search.gif
Description: 2_search.gif

Attachment: 3_results.gif
Description: 3_results.gif

Attachment: 4_app2.gif
Description: 4_app2.gif