NG Recruiter Developers Guide

This page is laid out in the following sections:

  • Intro
    • What is the sDs?
    • What are modules?
    • What are partials?
    • What is CSTOOLS?
  • Getting Started: Deploy a Recruiter
  • Configuring the Recruiter
    • Header Configuration
    • Opportunity Search
    • Volunteer Dashboard
    • FAQs
  • Advanced Configurations
    • Onboarding Configurations
    • Waiver Configurations
    • Directive/Component Configurations
    • Custom Templates
  • Custom Code using customServices






Recruiter 2.0 is designed to solve problems of maintainability, user interface/experience and performance. The primary frameworks used are AngularJS, Bootstrap, and the sDs.

What is the sDs?

The sDs, or Samaritan Data Service is a data service module that mimics the custom environment, with a few additional limitations, built specifically to work with the AngularJS framework.


What are modules?

AngularJS breaks code into various types of components.  The largest component being a module.  A module is a collection of other code components that performs a specific related set of operations.


  • Login Module - Performs all login related functions, eg: setting user data
  • Logout Module - Performs all logout related functions, eg: clearing user data
  • Search Filters Module - Stores all available search filters, processes attributes into filters, sets applied filters

Some modules are very simple, others have a lot of complexity to them.

Three modules make up the foundation of recruiter 2.0, the RecordManager, UserManager and ConfigSettings.

From these three modules other modules can pull crucial data such as records, settings and current user information.  These three modules include a variety of code components that help to maintain the need of the system.


What are partials?

Partials are partial HTML files infused with Angular placeholders for data and functions.  eg: "My name is {{VOL_FIRST_NAME}}."  Writing partials can be done in the same manner as writing any other HTML file.  Partials are then called into the web page's main view through a page route or directive.  When you navigate to another page in Angular, you are really only unloading one partial, and loading another partial.  With directives, partials can contain additional nested partials.  For more on partials read the Angular Documentation


What is CSTOOLS?

CSTOOLS is a folder on the server that stores all the core Recruiter 2.0 code including: templates, modules, stylesheets and deployment files.  Most files in this folder are accessed directly using a CORS (Cross Origin Resource Sharing) configuration.  This means these files are centralized for all clients regardless of instance or server.






Getting Started: Deploy a Recruiter

Below is a list of steps to get an Angular recruiter setup for the first time:

  1. Get a fresh copy of the deploy folder from  cstools/deploy/build-1.0/erec_id
  2. Rename the folder from erec_id to the recruiter ID of the system you will be working on.
  3. Open the config.php file and change the RECRUITER_ID to the number of your recruiter.
  4. Upload the renamed folder to the correct custom folder on AWS or other server.
  5. Load the recruiter in your browser, by going to the home page. eg:

After following these steps you should have a basic recruiter configuration.  You'll then want to proceed to configure the recruiter to have the proper logo, page title, URL structure, breadcrumb links etc.







Configuring the Recruiter

angular-config.js - is where the bulk of your code configuration settings will be.  In here you will find routes (url structure), search settings, page options, and a couple commonly customized code blocks including: standardHomePageCtrl, volmenuctrl and customServices.  All of which are described below.

Partials Folder - The partials folder is where you will store your custom HTML files for things like the home page, volunteer dashboard, and extra components that the client needs to complete their business processes.


Updating Settings

A first step change in angular-config.js is to update the client's logo, home URL and other system-wide settings.  Look for the text SYS_CONSTANTS defined near the top of the file, and you will see a JSON structure holding all the most common settings.  SYS_CONSTANTS are generally hard coded, and are not changed by the system once set.  You can add new settings to the SYS_CONSTANTS as you need. You should populate all the standard settings, as they are used throughout the system.

Other settings from RMS are loaded into the ConfigSettings module, and can be injected into any controller, factory or directive using the dependency 'configStore'.  Inside the configStore you will see settings defined in angular-config.js as well as other settings from other parts of the software.



Updating the Home Page

After doing some basic configurations, you will want to update the home page look and feel.  To do this you can use the homePageCtrl controller in the angular-config.js file and the index.html template in /custom/1234/partials.  Inside the controller for the home page you can add elements to the scope and make them available on the page.



Configuring the Profile

The profile editor is a WYSIWYG style editor which allows you to add available fields and form containers such as: fieldsets, bootstrap columns and float groups.  Each element added to the form has settings.  Fields can be set to required, labels can be changed, the input template can be changed, and more. Dynamic Regions can be applied to display certain sections of the profile.

You can access the form editor in your recruiter by going to the #/form_editor path eg:

Once you have built the form and are ready to save it, you can click save configuration.  This saves the file on your computer.  From there you will rename the file and upload it into the forms folder in the custom folder for your recruiter.



Configuring the Search

There is a standard search layout and a search module which makes setting up complex search functionality really easy.







Custom Code


All custom code is written in a service called customService, which exists in the angular-config.js file for each system.  The customService is provided to other key components, like the forms controller.  This contains our custom code to a single place in the system, but still allows us the flexibility to use it everywhere we need.





Configuration Options

List of all possible configuration options for the Angular recruiter.


    		'volProfileImageName':'Profile Image',
    		'volProfileAttachExtensions':"jpg, jpeg, gif, png",
    		"headerLogoLinkTitle":"Kaiser Permanente Home",
    		"headerTitle":"Kaiser Permanente Volunteers",
    		"title":"Opportunity Search",
    		"title":"Volunteer Registration",
    		"title":"Volunteer Login",
    		"title":"Edit Your Volunteer Profile",
    		"label":"Edit Profile",
    		"title":"Account Settings",
    		"label":"Account Settings",
    		"title":"Report Service",
    		"loggedInDisplay":true,"classes":"hide onboardingHidden"},{"url":"report_service_history",
    		"title":"View Logbook History",
    		"loggedInDisplay":true,"classes":"hide onboardingHidden"},{"url":"attachments",
    		"title":"View/Upload Attachments",
    		"loggedInDisplay":true,"classes":"hide onboardingHidden"}],"displayBreadcrumbs":false,"bcBackgroundColor":"#f5f5f5",
            'fullUserIdLabel':'Email Address',
    	'mapCenterCoordinates':'37.9,-121.25',//Set to somewhere in the middle
    				textColor: "#fff",
    				textColor: "#fff",
    				textColor: "#fff",
    				textColor: "#fff",
    				textColor: "#fff",
    		'vol_registration_complete':'Thank you for registering with Kaiser Permanente!',
    		    'duplicateRecordMsg':'We found a record that matches the name and email you entered. Please login or reset your password below. If you\'ve never registered with us before, please contact a volunteer coordinator using the following email: '+SYS_CONSTANTS.COORDINATOR_EMAIL,

If you experience a problem resetting your password, please contact Volunteer Administration for assistance.

            'openingsLabel':'Group Size (if applicable)',
    		'searchFilterHeaderText':'Search By:'
    		'allowGroupsUdf':{field:'CUSTOM_ATTRIBUTE#2508', value:'Group Leader'},
    		'allowIndivUdf':{field:'CUSTOM_ATTRIBUTE#2508', value:'Individual'},
    		    'hideFromSearchUdf':[{id:'CUSTOM_ATTRIBUTE#992',value:'Onboarding: Interview'},{id:'CUSTOM_ATTRIBUTE#992',value:'Onboarding:     Orientation'},{id:'CUSTOM_ATTRIBUTE#992',value:'Onboarding: Employee Health'},{id:'CUSTOM_ATTRIBUTE#992',value:'Training: Regional Compliance'},{id:'CUSTOM_ATTRIBUTE#992',value:'Training: Annual Education/Facility Review'}],
    			/*'defaultMessage':'A sample message',
    		'pageName':'Event Search'
            'pageName':'Event Details'
    		'pageTitle':'Manage Events'
    	'postLoginFunction':'customServices.getLoggedUserOpps(),customServices.setChiefDetails(), customServices.setOtherRoles(), customServices.getNoticeOpps()',
    		'pageName':'My Events'
    			{question:'How do I log time?', answer:'You can log time using the report/view hours link on your dashboard.'}
    		'message':'Thank you for registering. Please refer to the confirmation email for more information and next steps.',
    		'buttonText':'Partner Dashboard'
    	'volProfileImageName':'Profile Image',
    			'leftColumnClasses':'col-sm-4 col-md-3',
    			'rightColumnClasses':'col-sm-8 col-md-9',

    	'volProfileImageName':'Profile Image',












Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Powered by Zendesk