Agreements Scrollbox

When to Use

This shows an example of an agreement in a scrollable window. Pagination may be included at the top of the form.

Functionality

Not applicable.

Rendered Code

HTML

	
		
			
				License Agreement with Abbvie
			
			
				Service Agreement with Pharmacy Solutions
						
		
		

	
		
			
				
					
				

				
					
											
							
								
									Practice Name
									
									
								
									Title
									
									
								
									Authorized Signature
									
																									
							
							
								
									Work Number
									
									
									
									
								
									Email Address
									
																		
							
						
						
							

							
								
									
									By typing my name in the Authorized Signature box, I acknowledge and agree that my signature shall constitute an original signature for purpose of this Agreement.

CSS

/* --- Agreements Container -------------------- */
.agreement-container {
  border: 1px #ddd solid;
  height: 400px;
  margin-bottom: 30px;
  overflow-y: auto;
  width: 100%;
}
.agreement-container > img {
  max-width: 100%;
}

.agreement-form::after {
  clear: both;
  content: "";
  display: table;
}
.agreement-form .column {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
}
.agreement-form .column:last-child {
  margin-right: 0;
}

.lt-ie9 .agreement-container > img {
  width: 100%;
}

JavaScript

/* No JavaScript Required */

Example: Insurance Form

When to Use

This is an example of how you might use elements in the style guide to contruct an Insurance Form design.

Functionality

Not applicable.

Rendered Code

^* Mandatory Fields Insurance is ^* Insurance Company Type ^* Insurance Type ^*

Insurance Company Name ^* Phone Number ^* Fax Number

Policy Holder Name

RX Bin RX GRP RX PCN Issuer RX ID

HTML

	

		

			
				^* Mandatory Fields
					

			
				Insurance is ^*
				
			

			
				Insurance Company Type ^*
				
			

			
				Insurance Type ^*
				
									

		


		

			
			    Insurance Company Name ^*
			    
			

			
			    Phone Number ^*
			    
			

			
			    Fax Number
			    
						

		


		

			
			    Policy Holder Name
			    
					

		
		

		

			
			    RX Bin
			    
			

			
			    RX GRP
			    
			

			
			    RX PCN
			    
			

			
			    Issuer
			    
			

			
			    RX ID

CSS

/* --- Insurance Form Example -------------------- */
.insurance-form {
  overflow: auto;
}
.insurance-form::after {
  clear: both;
  content: "";
  display: table;
}
.insurance-form::after {
  clear: both;
  content: "";
  display: table;
}
.insurance-form .row {
  margin-bottom: 20px;
}
.insurance-form .row:last-child {
  margin-bottom: 0;
}

JavaScript

/* No JavaScript Required */

Example: Patient Form

When to Use

This is an example of how you might use elements in the style guide to contruct a Patient Form design.

Functionality

Not applicable.

Rendered Code

^* Mandatory Fields First Name ^* Last Name ^* Gender

Female
Male

Date of Birth ^*

Address ^* Suite

Zip Code City State ^*

Preferred Phone Number ^*

HTML

	
		
		
			

				
					^* Mandatory Fields
				

			    
			        First Name ^*
			        
			    

			    
			        Last Name ^*
			        
			    		

				
					Gender
					
						
							
							Female
						
						
							
							Male
						
						
				

			    
			        Date of Birth ^*
			        
			    						    	    

			


			

			    
			        Address ^*
			        
			    	

			    
			        Suite
			        
			    			    

			


			

			    
			        Zip Code
			        
			    

			    
			        City
			        
			    	

				
					State ^*
					
							    		    

			
	

			
			    
			        Preferred Phone Number ^*

CSS

/* --- Patient Form Example -------------------- */
.patient-form .inline-field {
  width: 200px;
}
.patient-form .row {
  margin-bottom: 30px;
}
.patient-form .row:last-child {
  margin-bottom: 0;
}

JavaScript

/* No JavaScript Required */

Example: Prior Authorization Form

When to Use

This is an example of how you might use elements in the style guide to contruct a Prior Authorization Form design.

Functionality

Not applicable.

Rendered Code

HTML

TODO

CSS

TODO

JavaScript

/* No JavaScript Required */

File Upload (Drop Zone)

When to Use

This functionality is designed for document uploads. It is currently only used on the PA form page so that the users can add supplemental documentation to the PA request.

Functionality

The user locates the document they wish to upload and drag it over the area within the dotted line. When the user drops the file an upload bar is shown that indicates the progress of the upload. For each new document the user adds a new bar is added. The latest addition is shown last in the list.

For documentations and more options, see http://www.dropzonejs.com/#usage.

Rendered Code

HTML

		
		
			 Add Supporting Documents (optional)
			Drag and drop the documents, or upload them manually. They will be included in the submission.

CSS

		.drop {
			background: #f8f8fa;
			border: 2px dashed #ddd;
			margin-bottom: 30px;
			margin-top: 30px;
			padding: 20px;
			text-align: center;
		}

		.drop .dz-fallback input[type="submit"].inactive {
			background: #eee;
			border-color: #ccc;
			color: #bbb;
			text-shadow: none;
		}

		.drop .dz-fallback input[type="submit"].inactive:hover {
			background: #eee;
			border-color: #ccc;
			color: #bbb;
		}

		.drop .dz-fallback input[type="submit"] {
			background-image: -webkit-linear-gradient($from: #ddd, $to: #bbb);
			background-image: linear-gradient(to	 , $to: #bbb);
			border: 1px solid #aaaaaa;
			color: #444 !important;
			display: inline-block;
			font-size: 16px;
			margin: 20px auto 0 auto;
			margin-bottom: 0.5em;
			margin-top: 0.5em;
			max-width: 200px;
			padding: 0.75em 2.5em;
			text-align: center;
			text-shadow: 0 1px 0 #d8d8d8;
		}

		.drop .dz-fallback input[type="submit"]:active {
			background-image: -webkit-linear-gradient($from: #bbb, $to: #ddd);
			background-image: linear-gradient(to	 , $to: #ddd);
		}

		.drop .dz-fallback input[type="submit"]:hover {
			background-image: -webkit-linear-gradient($from: #ccc, $to: #999);
			background-image: linear-gradient(to	 , $to: #999);
			color: #444 !important;
		}

		.drop .dz-fallback input[type="submit"]:hover {	 text-decoration: none }
		.drop .dz-fallback input[type="submit"] .fa {
			margin-right: 8px;
			position: relative;
			top: 1px;
		}

		.drop .dz-fallback input[type="file"] {
			margin: 0 auto;
			max-width: 440px;
		}

		.drop .dz-fallback .filename,
		.drop .dz-fallback .action {	display: none }
		.drop .dz-error-message {	 margin-top: 8px }
		.drop .dz-progress {
			background: white;
			border: 1px solid #ddd;
			height: 32px;
		}
		.drop .dz-details {
			position: relative;
			top: 24px;
		}
		.drop .dz-details,
		.drop .dz-progress,
		.drop .dz-error-message {
			color: #444;
			display: block;
			margin-left: auto;
			margin-right: auto;
			max-width: 500px;
		}

		.drop .dz-error-message + .dz-remove {	display: none }
		.drop .dz-details .fa-paperclip {
			left: 10px;
			position: relative;
		}

		.drop .dz-details .dz-filename {
			position: relative;
			text-align: left;
		}

		.drop .dz-details .dz-filename + .dz-remove {
			position: absolute;
			right: 8px;
			top: -1px;
		}

		.drop .dz-details .dz-filename span {
			left: 20px;
			position: relative;
		}

		.drop .dz-progress .dz-upload {
			background-color: #e6f3f8;
			display: block;
			height: 30px;
			width: 0%;
		}

		.drop .dz-preview {	 font-size: 14px }
		.drop .dz-preview .dz-size {	display: none }
		.drop .dz-preview img {	 display: none }
		.drop .fallback {
			margin-left: auto;
			margin-right: auto;
			max-width: 500px;
			text-align: center;
		}

		.drop .fallback input[type="file"] {
			font-size: 14px;
			margin-left: auto;
			margin-right: auto;
			max-width: 300px;
		}

		.drop p {	color: #999 }

JavaScript

dropZone();

Filter Dropdowns

When to Use

This is an example of filters with inputs stacked next to one another. They are most often used at the top of tables, to help filter the table's content.

Functionality

Not applicable.

Rendered Code

HTML


		
			
				Status
				
			

			
				Sub Filter

CSS

/* --- Filter Select Group -------------------- */
.filter-group {
  overflow: auto;
}
.filter-group::after {
  clear: both;
  content: "";
  display: table;
}
.filter-group label {
  float: left;
  margin-right: 15px;
  min-width: 225px;
}

JavaScript

$("select, input[type=text], input[type=checkbox], input[type=radio], input[type=password], input[type=search]").uniform({
		selectAutoWidth: false
	});

Typeahead Search

When to Use

Typeahead global search allows uers to easily find practices and prescribers by many different criteria.

Functionality

Typing in the input box will trigger suggestions for search results. For the example below, it is loading an JSON file. Type "Boston" to see how it works.

For more options, see the plugin page: http://twitter.github.io/typeahead.js/examples

Rendered Code

HTML

CSS

/* --- Typeahead Search -------------------- */
.search-container {
	height: 42px;
	position: relative;
	width: 450px;

	input.typeahead {
		border: 2px $blue solid;
		border-image-slice: 1;
		border-radius: 100px;
		box-sizing: border-box;
		margin-bottom: 0;
		height: 42px;
		padding: 0.4em 1em;
		padding-left: 36px;
		width: 450px;
	}

	.fa-search {
		background: transparent;
		border: 0;
		color: $blue;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		width: 36px;
	}
}



.tt-menu {
	width: 414px;
	margin:  0 0 12px 20px;
	padding: 0;
	background-color: #fff;
	border: 1px solid #ccc;
	-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
	 -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
	      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);

	.tt-suggestion {
	  border-bottom: 1px #ddd solid;
	  color: #999;
	  padding: 11px 36px;
	  font-size: 16px;
	  line-height: 24px;
	}

	.tt-suggestion:last-child {
		margin-bottom: 0;
	}

	.tt-suggestion:hover {
	  cursor: pointer;
	  color: $gray-medium-1;
	  background-color: #f3f3f3;
	}

	.tt-suggestion.tt-cursor {
	  color: $gray-medium-1;
	  background-color: #f3f3f3;

	}

	.tt-suggestion p {
	  margin: 0;
	}

	.tt-highlight {
		color: $gray-medium-1;
	}

	.group-name {
		background: $blue-light-1;
		border-bottom: 1px #ddd solid;
		font-size: 16px;
		font-weight: 300;
		margin: 0;
		padding: 11px 15px;
		text-transform: none;

		&:last-child {
			border-bottom: 0;
		}
	}          	
}

JavaScript

// Typeahead Search 
var initTypeahead = function() {

	// Sets where the data is coming from
	var nbaTeams = new Bloodhound({
		datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
		queryTokenizer: Bloodhound.tokenizers.whitespace,
		prefetch: '../Scripts/vendor/typeahead.js/example_data/nba.json'
	});

	var nhlTeams = new Bloodhound({
		datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
		queryTokenizer: Bloodhound.tokenizers.whitespace,
		prefetch: '../Scripts/vendor/typeahead.js/example_data/nba.json'
	});

	// Finds the input and inits Typeahead
	$('.typeahead').typeahead({
			highlight: true,
			minLength: 3
	},

	// Defines how suggestions are displayed
	{
		name: 'nba-teams',
		display: 'team',
		source: nbaTeams,
		templates: {
			header: 'NBA Teams'
		}
	}, {
		name: 'nhl-teams',
		display: 'team',
		source: nhlTeams,
		templates: {
			header: 'NHL Teams'
		}
	});
};