Screens Overview

Registration screens exist in two parts:

  1. Server-side configurations
  2. Client-side HTML

In order for a screen to render, both parts must be in place.

Server-side, the screen’s relationships to other screens and how it is displayed by default are defined in a configuration file. This information can be viewed and configured remotely, as documented in the Configuration API endpoints.

Client-side, screens are rendered via HTML <div> tags that have id attributes corresponding to the screen’s name (as defined in the server-side configuration file). By default, all screens contain a CSS rule set to "display: none", and the Janrain JavaScript modifies this rule to display and hide the appropriate screen based user interaction moving through he registration experience.

Optionally, there may also be JTL (Janrain Templating Language) markup within the screen’s div. The widget uses this markup to render form elements on the screen. An example screen <div> for the forgotPassword screen and JTL tags for the forgotPasswordForm is shown below:


<div style="display:none;"id="forgotPassword">
 <div class="capture_header">
 <h1>Create New Password</h1>
 </div>
 <h2>We'll send you a link to create a new password.</h2>
 {* #forgotPasswordForm *}
 {* signInEmailAddress *}
 <div class="capture_footer">
 <div class="capture_left">
 {* backButton *}
 </div>
 <div class="capture_right">
 <input value="Send"type="submit"class="capture_btn capture_primary">
 </div>
 </div>
 {* /forgotPasswordForm *}
</div>

Screen Modality

By default, screens render client-side as a modal (with the exception being the editProfile screen). To change this configuration to all-embedded, you will need to make both client-side and server-side changes:

  • Server-side: Set all screens to modal=false by using the Configuration API endpoints.
  • Client-Side: Remove all anchor tags with onclick attributes that call the janrain.capture.ui.modal.close() function, or replace them with your own functions (for example, redirecting a user from the signIn screen to the editProfile screen after successful login).
Note. If you want both a modal and an embedded version of your screens, you can do one of the following:
 
  • Embed all screens, then create your own modals client-side where desired.
  • Create two backend configuration files.
     
Talk to your Janrain representative for details.

Information on customizing the appearance/styling of screens can be found on the Customizing Registration page.

Rendering Screens Programmatically

Unless noted otherwise (such as for the verifyEmail screen), most screens can be rendered in the browser programmatically, either by calling a JavaScript function or placing a data-capturescreen HTML attribute on an anchor tag.

For example, the forgotPassword screen can be rendered by either of the following methods, assuming the screen markup exists on the user’s current page.


<a href="#"onclick="janrain.capture.ui.renderScreen('forgotPassword')">Forgot your password?</a>
<a href="#"data-capturescreen="forgotPassword">Forgot your password?</a>

Screen Entry-Points

The registration or login flow begins at one of these screens (refer to the individual sections for more details):