Description

Our Connections Director wanted a way to quickly update profile photos of new members at a membership class without having to go through the whole process of searching for a person, going to their profile, editing the profile, editing the photo, capturing/uploading the new photo, and finally saving the profile. After some experimenting, I came up with a much more streamlined process with a lot fewer clicks, scrolls and page loads, that allows a staff member or volunteer to very quickly search, capture, upload and start again for the next person in line.

Summary

  1. The user loads a special page on a mobile device with a camera
  2. The user selects a person, and then is shown an image upload control (Most devices should automatically give the option to use the camera for the upload)
  3. The user takes the picture and submits the form
  4. The selected profile is updated and the user is taken back to the beginning to start over with the next person in line

How-To

  1. Import the Quick Profile Photo Upload workflow type (See attached files)
  2. Create a new page on the public website
    Basic Settings
    • Internal Name: Quick Profile Photo Uploader
    • Layout: FullWidth (or optionally a new layout described below)
    Display Settings
    • Show Breadcrumbs: No
    • Show Description: No
    • Menu Display When: Never
    Advanced Settings
    • Allow Indexing: No
    • Page Route: quick-photos
  3. Optional: Create a new security role for volunteers that may need to use the page
  4. Set the following view permissions on the page
    • Allow: RSR - Rock Administration
    • Allow: RSR - Staff Workers
    • Allow: [optional volunteer role]
    • Deny: All Users
  5. Add a Workflow Entry block to the page
    • Name: Quick Profile Photo Uploader
    • Workflow Type: Quick Profile Photo Uploader
  6. Optional: Add some CSS to the block's Pre-HTML field to hide contact info from the person picker for a little extra privacy if you're concerned about giving access to volunteers
    <style>
        .picker .picker-select-item-details .contents .address,
        .picker .picker-select-item-details .contents .margin-t-sm { display: none; visibility: hidden; }
    </style>
  7. Load the page on a mobile device and try it out!

Minimal Layout

Depending on the design of your external site, it may help to create a new minimal layout for your theme that doesn't include your site's header, footer, etc. I found that the Splash layout from the internal Rock theme worked great. I just copied Splash.aspx and Splash.aspx.cs from /Themes/Rock/Layouts to the same folder in my external theme, and then edited Splash.aspx to delete the part that displayed the big Rock logo. (See attached files)