# Jotform API Widgets | Jotform Developers

*   [Jotform Login](https://www.jotform.com/developers/tools/?jfNext=1#jotformLogin)
*   [Form Picker](https://www.jotform.com/developers/tools/?jfNext=1#jotformPicker)
*   [Question Picker](https://www.jotform.com/developers/tools/?jfNext=1#questionPicker)
*   [Question Mapper](https://www.jotform.com/developers/tools/?jfNext=1#jotformQuestionMapper)
*   [Question Naming](https://www.jotform.com/developers/tools/?jfNext=1#questionNaming)
*   [Report Picker](https://www.jotform.com/developers/tools/?jfNext=1#reportPicker)
*   [Jotform Anywhere](https://www.jotform.com/developers/tools/?jfNext=1#jotformAnywhere)
*   [Jotform Question Types](https://www.jotform.com/developers/tools/?jfNext=1#jotformQuestionTypes)

# Jotform Login

Authorize users through Jotform to get API Access

Jotform Login Demo
1.   //code for the button above

2.   $("#jotformlogin").click(function(e) {

3.     JF.login(

4.       function success() {

5.         $("#loginresults").html("user authorized successfully");

6.       },

7.       function error() {

8.         $("#loginresults").html("error during authorization");

9.       }

10.     );

11.   });

## Getting started

*   Download latest [jotform.js](https://js.jotform.com/JotForm.js) or [jotform.min.js](https://js.jotform.com/JotForm.min.js)
*   or copy and paste 
    1.   <script src='https://js.jotform.com/JotForm.min.js'></script>

## Features

*   Login users through Jotform
*   Get access to a Jotform API key to use **now** or **later**
*   Get **view** or **edit** access to a user's forms and form submission data 

## Screenshot

![Image 1: Jotform Login Widget](https://cdn.jotfor.ms/p/developers/images/screenshots/jotform-login-widget.png)
## Example

Using Jotform login is straightforward. It accepts two parameters as function. First parameter will be called after successful login and second parameter will be called if login fails.

1.   JF.login(

2.     function() {

3.       //succcessful login

4.     },

5.     function() {

6.       //login failed

7.     }

8.   );

[See in jsfiddle](https://jsfiddle.net/Tzk6T/1/)

## Settings

JF.initialize allows you to configure your application to work with Jotform API. When you call JF.login to launch a login pop-up with the configuration provided during initialization. Here is an example:

1.   JF.initialize({

2.     // remember user on next visit by cookie

3.     // default: false

4.     enableCookieAuth : true, 

5.     

6.     // it will be visible on login window

7.     // default:hostname of your site

8.     appName: "YOUR_DESIRED_APP_NAME",

9.     

10.     // can be "readOnly" or "full"

11.     // default: readOnly

12.     accessType: 'readOnly' 

13.   });

14.   JF.login(

15.     function() {

17.     },

18.     function() {

20.     }

21.   );

[See in jsfiddle](https://jsfiddle.net/A34X4/1/)

After successful login `JF` object will be initialized with just logged in user's API key. At this point you can call various operations depending on your application's permission. Here is another code sample to get a user's info after authorization:

1.   JF.login(

2.     function() {

3.       JF.getUser(function(resp) {

4.         console.log(resp);

5.       });

6.     },

7.     function() {

8.       //login failed

9.     }

10.   );

[See in jsfiddle](https://jsfiddle.net/yEgzm/)

Getting a user's API key after a successful login:

1.   JF.login(

2.     function() {

3.       var apiKey = JF.getAPIKey();

4.     },

5.     function() {

6.       //login failed

7.     }

8.   );

[See in jsfiddle](https://jsfiddle.net/bQ2tn/)

## Form Picker

Let Jotform users select one of their forms

Form Picker Demo
1.   //code for the button above

2.   $("#formpicker").click(function(e) {

3.     JF.FormPicker({

4.       multiSelect: true,

5.       infinite_scroll: true,

6.       search: true,

7.       onSelect: function(r) {

8.         var selectedIds = [];

9.         for(var i=0; i<r.length; i++) {

10.           selectedIds.push(r[i].id);

11.         }

12.         $("#results").html('Selected form ids: ' + selectedIds.join());

13.       },

14.       onReady: function() {

15.         console.log('Form modal rendered');

16.       },

17.       onClose : function() {

18.         console.log('Form picker closed');

19.       },

20.       onLoad : function(formList, markup) {

21.         $("#results").html('Form list rendered');

22.         console.log('All forms loaded', formList);

23.         console.log('Forms list HTML markup', markup);

24.       }

25.     });

26.   });

### Getting started

*   Download latest [jotform.js](https://js.jotform.com/JotForm.js) or [jotform.min.js](https://js.jotform.com/JotForm.min.js)
*   Download latest [FormPicker.js](https://js.jotform.com/FormPicker.js) or [FormPicker.js.min.js](https://js.jotform.com/FormPicker.min.js)

or copy and paste 
    1.   <script src='https://js.jotform.com/JotForm.min.js'></script>

    2.   <script src='https://js.jotform.com/FormPicker.min.js'></script>

### Features

*   Displays a form list to Jotform users
*   Authorizes user if not already
*   Allows multiple or single selection 

### Screenshot

![Image 2: Jotform Form Picker](https://cdn.jotfor.ms/p/developers/images/screenshots/jotform-form-picker.png)
### Usage

*   Example:

    1.   JF.FormPicker();

*    Example usage using all options: 
    1.   //Set default options

    2.   JF.FormPicker({

    3.     title: 'Form Picker',

    4.     showPreviewLink: false,

    5.     offset: 0,

    6.     limit: 100,

    7.     filter: false,

    8.     sort: 'created_at',

    9.     sortType: 'DESC',

    10.     multiSelect: false,

    11.     infinite_scroll: false,

    12.     search: false,

    13.     onSelect: function(selectedForms) {},

    14.     onReady: function() {},

    15.     onClose: function() {},

    16.     onLoad: function() {}

    17.   });

### Options

*   ### title

Type: `string` Default: `Form Picker` Specify a title for your formpicker modal 
*   ### sort

Type: `string` Default: `updated_at` Form list will be sorted accordingly. Parameter can be `id`, `username`, `title`, `status`(ENABLED, DISABLED, DELETED), `created_at`, `updated_at`, `new` (unread submissions count), `count` (all submissions count), `slug` (used in form URL).  
*   ### sortType

Type: `string` Default: `DESC` Sorting direction when listing forms, it can be Descending or in Ascending order. Parameter can be `DESC`, `ASC` 
*   ### offset

Type: `int` Default: `0` Start of each result set for form list. 
*   ### limit

Type: `int` Default: `100` Number of results in each result set for form list. 
*   ### filter

Type: `object | boolean` Default: `false` Filters the query results to fetch a specific form range. Example: {"new":"1"}. You can also use gt(greater than), lt(less than), ne(not equal to) commands to get more advanced filtering : Example: {"created_at:gt":"2013-01-01 00:00:00"} 
*   ### showPreviewLink

Type: `boolean` Default: `false` Show a preview link next to each form title (open in new tab) 
*   ### multiSelect

Type: `boolean` Default: `false` User can select multiple forms if enabled. 
*   ### infinite_scroll

Type: `boolean` Default: `false` Load the rest of your forms as you scroll to the end of the existing content 
*   ### search

Type: `boolean` Defaul: `false` Search bar will be shown to easily find your desired form in real time 
*   ### onSelect

Type: `function` Default: `$.noop`  Gets fired after user selects a form and closes the modal.   Passes a list of selected form objects. A sample form object: 
    1.   {

    2.     count: "0"

    3.     created_at: "2013-07-21 20:17:07"

    4.     height: "465"

    5.     id: "32017755214953"

    6.     new: "0"

    7.     status: "ENABLED"

    8.     title: "Full screen text"

    9.     unread: "0"

    10.     updated_at: "2013-07-21 20:17:07"

    11.     url: "https://form.jotformpro.com/form/32017755214953"

    12.     username: "testuser"

    13.   }

*   #### onReady

Type: `function` Default: `$.noop` Gets called after the modal layout rendered. 
*   ### onLoad

Type: `function` Default: `$.noop` Gets called after all the forms list rendered. Passes two arguments. `formsList(object)` and `markup(the list HTML markup)` 
*   ### onClose

Type: `function` Default: `$.noop` Gets fired when modal window closed 

## Question Picker

Let Jotform users select questions from one of their forms

Question Picker Demo
1.   //code for the button above

2.   $("#questionpicker").click(function(e) {

3.     JF.FormPicker({

4.       onSelect: function(forms) {

5.         //after form select initialize question picker plugin

6.         if(forms.length > 0) {

7.           var formID = forms[0].id;

8.           JF.QuestionPicker(formID, {

9.             multiSelect: true,

10.             loadForm: false,

11.             onReady : function() {

12.               console.log("ready")

13.             },

14.             onSelect : function(q) {

15.               console.log(q);

16.             },

17.             onClose : function() {

18.               console.log("closed");

19.             }

20.           });

21.         }

22.       },

23.       onReady: function() {

24.         console.log('Form modal rendered');

25.       },

26.       onClose : function() {

27.         console.log('Form picker closed');

28.       },

29.       onLoad : function(formList, markup) {

30.         $("#results").html('Form list rendered');

31.         console.log('All forms loaded', formList);

32.         console.log('Forms list HTML markup', markup);

33.       }

34.     });

35.   });

## Getting started

*   Download latest [JotForm.js](https://js.jotform.com/JotForm.js) or [JotForm.min.js](https://js.jotform.com/JotForm.min.js)
*   Download latest [FormPicker.js](https://js.jotform.com/FormPicker.js) or [FormPicker.min.js](https://js.jotform.com/FormPicker.min.js)
*   Download latest [QuestionPicker.js](https://js.jotform.com/QuestionPicker.js) or [QuestionPicker.js.min.js](https://js.jotform.com/QuestionPicker.min.js)

or copy and paste 
    1.   <script src='https://js.jotform.com/JotForm.min.js'></script>

    2.   <script src='https://js.jotform.com/FormPicker.min.js'></script>

    3.   <script src='https://js.jotform.com/QuestionPicker.min.js'></script>

## Usage

*   Example: _(Note: FormID is required)_

    1.   //FORM_ID: Form with given id will be displayed in QuestionPicker window

    2.   JF.QuestionPicker('FORM_ID');

*    Example usage using all options: 
    1.   //Set the FORM_ID(1st parameter) and the default options(2nd parameter)

    2.   JF.QuestionPicker('FORM_ID', {

    3.     sort: 'order',

    4.     sortType: 'ASC',

    5.     title: 'Question Picker',

    6.     multiSelect: false,

    7.     ignore_types: [],

    8.     loadForm: false,

    9.     onSelect: function(selectedQuestions) {

    10.     },

    11.     onRender: function() {

    12.     },

    13.     onClose: function() {

    14.     },

    15.     onLoad: function(resp) {

    16.     }

    17.   });

## Options

*   ### title

Type: `string` Default: `Question Picker` Specify a title for your Question picker modal 
*   ### sort

Type: `string` Default: `order` Questions will be sorted accordingly. There are ONLY two options available `order`, `qid` 
*   ### sortType

Type: `string` Default: `DESC` Sorting direction when listing questions, it can be Descending or in Ascending order. Parameter can be `DESC`, `ASC` 
*   ### ignore_types

Type: `array` Default: `[]` Exclude certain type of questions. Full list[[Link 1](https://www.jotform.com/help/46-quick-overview-of-form-fields/), [Link 2](https://api.jotform.com/docs/)] 
*   ### loadForm

Type: `boolean` Default: `false` An alternative way to render the whole Form to the modal window and select a certain type of question 
*   ### onSelect

Type: `function` Default: `noop`  Gets fired after user selects questions from form and closes the modal.   Passes array of selected question objects. A sample question object: 
    1.   {

    2.     count: "0"

    3.     created_at: "2013-07-21 20:17:07"

    4.     height: "465"

    5.     id: "32017755214953"

    6.     new: "0"

    7.     status: "ENABLED"

    8.     title: "Full screen text"

    9.     unread: "0"

    10.     updated_at: "2013-07-21 20:17:07"

    11.     url: "https://form.jotformpro.com/form/32017755214953"

    12.     username: "testuser"

    13.   }

*   ### onReady

Type: `function` Default: `$.noop`

Gets called after form rendered.

*   ### onClose

Type: `function` Default: `$.noop`

Gets fired when modal window closed

*   ### onLoad

Type: `function` Default: `$.noop` Gets called after all the questions rendered. Passes two arguments. `questionList(object)` and `markup(the list HTML markup)` 

## Question Mapper

**Jotform Question Mapper** is a small widget designed to be used in Jotform integration apps letting users create connection between Jotform form questions and their apps database fields.

**Jotform Question Mapper** plays a vital role when you integrate your app into Jotform. [Integration Apps](https://www.jotform.com/developers/integrations/) can be deployed on the Jotform Form Builder [Integrations Wizard](https://www.jotform.com/developers/integrations/#tutorial-creation). And for that you need to create a map between Jotform form questions to your apps fields.

## Screenshot

![Image 3: Question Mapper](https://cdn.jotfor.ms/p/developers/images/screenshots/question-mapper1.png)

## Getting Started

*   Download latest [jotform.min.js](https://js.jotform.com/JotForm.min.js) or [jotformIntegrate.min.js](https://js.jotform.com/JotFormIntegrate.min.js)
*   or copy and paste 
    1.   <script src='https://js.jotform.com/JotForm.min.js'></script>

    2.   <script src='https://js.jotform.com/JotFormIntegrate.min.js'></script>

## Usage

*   Example matching questions of one of your forms with given targetFields:

    1.   JF.connect({

    2.     formId : "Your Form ID"

    3.   });

    5.   JF.fieldMatch({

    6.     el : $("#match").get()[0],

    7.     targetFields : [

    8.     {

    9.       value : "Full Name",

    10.       key : "fullName",

    11.       type : "control_fullname",

    12.       autoMatch:true,

    13.       required:true //require existence of fullName field on Jotform

    14.     },

    15.     {

    16.       value : "Address",

    17.       key : "address",

    18.       type : "control_textbox",

    19.       autoMatch:true

    20.     },

    21.     {

    22.       value : "Comment",

    23.       key : "comment",

    24.       type : "control_textbox",

    25.       autoMatch:false

    26.     },

    27.     {

    28.       value : "E-Mail",

    29.       key : "email",

    30.       type : "control_email",

    31.       autoMatch:false,

    32.       required : true

    33.     },

    34.     {

    35.       value : "Datetime",

    36.       key : "datetime",

    37.       type : "control_datetime",

    38.       autoMatch:false,

    39.       required : true

    40.     }

    41.     ],

    43.     matches: [{question: "3", target: "fullName"}],

    45.     waitForResources:true,

    47.     callback:function(matches){

    48.       console.log("matches " , {matches:matches});

    49.     }

    50.   });

## Options

*   ### el

Type: `string` Default: `body` Target HTML DOM element in which the widget will be rendered. 
*   ### targetFields

Type: `array` Default: `[]` Array of field objects.For example: the fields may represent your database schema column names. 
*   ### targetFields.value

Type: `string` Default: `""` Text value of field that will be put whithin `<option>` tags. 
*   ### targetFields.key

Type: `string` Default: `""` Key of the field that will be used on matches, should be your db column name and should be alpha-numeric 
*   ### targetFields.type

Type: `string` Default: `"control_textbox"` Jotform type of your field. May have following values `control_email`, `control_fullname`,`control_datetime`. For complete list of allowed values see [Jotform Question Types](https://www.jotform.com/developers/tools/?jfNext=1#jotformQuestionTypes)

 You can also use `"any"` to match anyfield, and use comma seperated lists to use multiple types

 For Example : `"control_textbox,control_email"` would allow matching of both textbox and email fields.  
*   ### targetFields.autoMatch

Type: `boolean` Default: `false` If set true, this field and corresponding Jotform question will be added to matches automatically. 
*   ### targetFields.required

Type: `boolean` Default: `false` If set true, requires this field to be among the matches and dis-allow user to complete matching before matching this field with a type-compatible Jotform question. If given form does not contain a question of this type, then a warning message will be rendered pointing out the user about missing field type. 
*   ### matches

Type: `array` Default: `[]` An array of matched objects to be shown immediately in the question maper list. Can be used when passing previously saved matches that the user can edit 
*   ### matches.question

Type: `string` Default: `""` Key of the form question for the match 
*   ### matches.target

Type: `string` Default: `""` Key of the target field for the match 
*   ### waitForResources

Type: `boolean` Default: `true`

Wait for required js and css files, should be used when there is a race condition between creating visual twitches.

*   ### callback

Type: `function` Default: `$.noop`

A function of your choice, that will receive the matches when user clicks finish button.

## Question Naming

Let users give a custom name to form questions. Get inputs and process the data to your needs.

It can also remember previously entered data.

Question Naming Demo

Success! Look at the Console for response

1.   //code for the button above

2.   $("#question_naming").click(function(e) {

3.     JF.FormPicker({

4.       multiSelect: false,

5.       onSelect: function(response)

6.       {

7.         var formID = response[0].id;

8.         JF.QuestionNaming(formID, {

9.           title: 'Question Naming Demo',

10.           onSubmit: function(e)

11.           {

12.             console.log(e);

13.             $("#question_naming_results").show();

14.           }

15.         });

16.       }

17.     });

18.     return false;

19.   });

## Getting started

*   Download latest [JotForm.js](https://js.jotform.com/JotForm.js) or [JotForm.min.js](https://js.jotform.com/JotForm.min.js)
*   Download latest [FormPicker.js](https://js.jotform.com/FormPicker.js) or [FormPicker.min.js](https://js.jotform.com/FormPicker.min.js)
*   Download latest [QuestionNaming.js](https://js.jotform.com/QuestionNaming.js) or [QuestionNaming.js.min.js](https://js.jotform.com/QuestionNaming.min.js)

or copy and paste 
    1.   <script src='https://js.jotform.com/JotForm.min.js'></script>

    2.   <script src='https://js.jotform.com/FormPicker.min.js'></script>

    3.   <script src='https://js.jotform.com/QuestionNaming.min.js'></script>

## Features

*   Receive custom names of your form questions from your users
*   Remember user previously entered data
*   Put your own RegEx to validate user inputs and add validation error message
*   Exclude certain type of questions
*   Authorizes user if not already

## Screenshot

![Image 4: Question Naming](https://cdn.jotfor.ms/p/developers/images/screenshots/question-naming.jpg)
## Usage

*   Example: _(Note: FormID is required)_

    1.   //formID: an ID of a form on where the questions will be coming from

    2.   JF.QuestionNaming(formID);

*    Example usage using all options: 
    1.   //Set the formID(1st parameter) and the default options(2nd parameter)

    2.   JF.QuestionNaming(formID, {

    3.     sort: 'order',

    4.     sortType: 'ASC',

    5.     title: 'Question Naming',

    6.     remember: true,

    7.     ignore_types: [

    8.       "control_head", 

    9.       "control_button", 

    10.       "control_pagebreak", 

    11.       "control_collapse", 

    12.       "control_text"

    13.     ],

    14.     unique: false,

    15.     unique_error_msg: "You cannot name fields with the same name.",

    16.     allowed_inputs: /^[a-z0-9_]+$/i,

    17.     inputs_error_msg: "Only Alphabetic and Numeric characters are allowed.",

    18.     onSubmit: function(response) {},

    19.     onProgress: function() {},

    20.     onReady: function() {},

    21.     onClose: function() {},

    22.     onLoad: function() {}

    23.   });

## Options

*   ### title

Type: `string` Default: `Question Naming` Specify a title for your Question Naming modal 
*   ### sort

Type: `string` Default: `order` Questions will be sorted accordingly. There are ONLY two options available `order`, `qid` 
*   ### sortType

Type: `string` Default: `DESC` Sorting direction when listing questions, it can be Descending or in Ascending order. Parameter can be `DESC`, `ASC` 
*   ### remember

Type: `boolean` Default: `true` Remember user inputs and prepopulate fields on the next widget load. 
*   ### ignore_types

Type: `array` Default: `["control_head", "control_button", "control_pagebreak", "control_collapse", "control_text"]` Exclude certain type of questions. Full list[[Link 1](https://www.jotform.com/help/46-quick-overview-of-form-fields/), [Link 2](https://api.jotform.com/docs/)] 
*   ### unique

Type: `boolean` Default: `false` Prevent textfield inputs to be identical. 
*   ### unique_error_msg

Type: `string` Default: `You cannot name fields with the same name.` Display an error message(on the footer area) when the unique validation not met. 
*   ### allowed_inputs

Type: `RegEx` Default: `/^[a-z0-9_]+$/i` Validate user inputs after they type something on the field - from an event `onblur`. 
*   ### inputs_error_msg

Type: `string` Default: `Only Alphabetic and Numeric characters are allowed.` Display an error message(on the footer area) when the input validation not met. 
*   ### onSubmit

Type: `function` Default: `$.noop`  Gets fired after user submits the modified fields.  Passes a list of question objects with a new property `modified_text` that contains the custom name of the question. A sample response object: 
    1.   [

    2.     0: {

    3.       cols: "40"

    4.       entryLimit: "None-0"

    5.       labelAlign: "Auto"

    6.       modified_text: "ANewTextareaIs"

    7.       name: "aNew"

    8.       order: "1"

    9.       qid: "9"

    10.       readonly: "No"

    11.       required: "No"

    12.       rows: "6"

    13.       text: "Question Text default - 1"

    14.       type: "control_textarea"

    15.       validation: "None"

    16.       wysiwyg: "Disable"

    17.     },

    18.     1: {

    19.       hint: " "

    20.       labelAlign: "Auto"

    21.       modified_text: "YourProperNamePlease"

    22.       name: "putA"

    23.       order: "2"

    24.       qid: "1"

    25.       readonly: "No"

    26.       required: "No"

    27.       size: "20"

    28.       text: "Question Text default - 2"

    29.       type: "control_textbox"

    30.       validation: "None"

    31.     }

    32.   ]

*   ### onReady

Type: `function` Default: `$.noop` Gets called after the modal layout rendered. 
*   ### onLoad

Type: `function` Default: `$.noop` Gets called after all the questions rendered. Passes two arguments. `questionList(object)` and `markup(the list HTML markup)` 
*   ### onClose

Type: `function` Default: `$.noop` Gets fired when modal window closed 

## Report Picker

Let Jotform users select report(s) from their forms

Report Picker Demo
1.   //code for the button above

2.   $("#reportpicker").click(function(e) {

3.     JF.FormPicker({

4.       multiSelect: false,

5.       onSelect: function(response) {

6.         var formID = response[0].id;

7.         JF.ReportPicker(formID, {

8.           title: 'Pick your Report from form ID: ' + formID,

9.           showPreviewLink: true,

10.           multiSelect: false,

11.           onSelect: function(r) {

12.             var selectedIds = [];

13.             for(var i=0; i <r.length; i++) {

14.               selectedIds.push(r[i].id);

15.             }

16.             $("#reportpicker_results").html('Selected report ids: ' + selectedIds.join());

17.           },

18.           onReady: function() {

19.             console.log('Report modal rendered');

20.           },

21.           onClose: function() {

22.             console.log('Report picker closed');

23.           },

24.           onLoad: function(reportsList, markup) {

25.             $("#reportpicker_results").html('Report list rendered');

26.             console.log('All reports loaded', reportsList);

27.             console.log('Reports list HTML markup', markup);

28.           }

29.         });

30.       }

31.     });

32.   });

## Getting started

*   Download latest [JotForm.js](https://js.jotform.com/JotForm.js) or [JotForm.min.js](https://js.jotform.com/JotForm.min.js)
*   Download latest [FormPicker.js](https://js.jotform.com/FormPicker.js) or [FormPicker.min.js](https://js.jotform.com/FormPicker.min.js)
*   Download latest [ReportPicker.js](https://js.jotform.com/ReportPicker.js) or [ReportPicker.js.min.js](https://js.jotform.com/ReportPicker.min.js)

or copy and paste 
    1.   <script src='https://js.jotform.com/JotForm.min.js'></script>

    2.   <script src='https://js.jotform.com/FormPicker.min.js'></script>

    3.   <script src='https://js.jotform.com/ReportPicker.min.js'></script>

## Features

*   Displays a list of reports from specific form to Jotform users
*   Authorizes user if not already
*   Allows multiple or single selection 

## Screenshot

![Image 5: Jotform Report Picker](https://cdn.jotfor.ms/p/developers/images/screenshots/jotform-report-picker.png)
## Usage

*   Example: _(Note: FormID is required)_

    1.   //formID: an ID of a form on where the reports will be coming from

    2.   JF.ReportPicker(formID);

*    Example usage using all options: 
    1.   //Set the formID(1st parameter) and the default options(2nd parameter)

    2.   JF.ReportPicker(formID, {

    3.     title: 'Report Picker',

    4.     showPreviewLink: false,

    5.     sort: 'created_at',

    6.     sortType: 'DESC',

    7.     offset: 0,

    8.     limit: 100,

    9.     filter: false,

    10.     multiSelect: false,

    11.     onSelect: function(selectedForms) {},

    12.     onProgress: function() {},

    13.     onReady: function() {},

    14.     onClose: function() {},

    15.     onLoad: function() {},

    16.     modalCSS: '<stylesheet link>'

    17.   });

## Options

*   ### title

Type: `string` Default: `Report Picker` Specify a title for your report picker modal 
*   ### sort

Type: `string` Default: `updated_at` Report list will be sorted accordingly. Parameter can be `id`, `created_at`, `updated_at`, `title`, `status`(ENABLED, DISABLED, DELETED)  
*   ### sortType

Type: `string` Default: `DESC` Sorting direction when listing reports, it can be Descending or in Ascending order. Parameter can be `DESC`, `ASC` 
*   ### offset

Type: `int` Default: `0` Start of each result set for report list. 
*   ### limit

Type: `int` Default: `100` Number of results in each result set for report list. 
*   ### filter

Type: `object | boolean` Default: `false` Filters the query results to fetch a specific form range. Example: {"new":"1"}. You can also use gt(greater than), lt(less than), ne(not equal to) commands to get more advanced filtering : Example: {"created_at:gt":"2013-01-01 00:00:00"} 
*   ### showPreviewLink

Type: `boolean` Default: `false` Show a preview link next to each report title (open in new tab) 
*   ### multiSelect

Type: `boolean` Default: `false` User can select multiple reports if enabled. 
*   ### onSelect

Type: `function` Default: `$.noop`  Gets fired after user selects a report and closes the modal.   Passes a list of selected report objects. A sample report object: 
    1.   {

    2.     created_at: "2013-09-11 00:00:00"

    3.     fields: "ip,dt,5,4,6"

    4.     form_id: "32314725153952"

    5.     id: "32536680046050"

    6.     isProtected: false

    7.     list_type: "excel"

    8.     previewLink: true,

    9.     settings: ""

    10.     status: "ENABLED"

    11.     title: "Excel Report Test"

    12.     updated_at: null

    13.     url: "https://www.jotform.com/excel/32536680046050"

    14.   }

*   ### onReady

Type: `function` Default: `$.noop` Gets called after the modal layout rendered. 
*   ### onLoad

Type: `function` Default: `$.noop` Gets called after all the report list rendered. Passes two arguments. `reportsList(object)` and `markup(the list HTML markup)` 
*   ### onClose

Type: `function` Default: `$.noop` Gets fired when modal window closed 
*   ### modalCSS

Type: `string` Default: `JotFormReportPicker.css` Customize the report picker to your own style. Please refer to the default [stylesheet](https://js.jotform.com/css/JotFormReportPicker.css) for css identifiers 

## Jotform Anywhere

**Jotform Anywhere** is a small JavaScript SDK that brings the capabilities of Jotform Form Builder to all web apps.

**Jotform Anywhere** provides a set of client side functionality to let you add a Form Builder inside your web app. Your users can create/edit and embed forms without leaving your site.

For a complete list of documentation and demo code visit [Jotform Anywhere](https://www.jotform.com/anywhere/)

Jotform Anywhere Demo
## Screenshot

![Image 6: Jotform Anywhere Screenshot](https://cdn.jotfor.ms/p/anywhere/img/jotform-anywhere-screenshot.png)

## Jotform Question Types

Here is the complete* list of question types you can use on **Jotform Question Mapper**.

1.   control_head

2.   control_text

3.   control_textbox

4.   control_textarea

5.   control_dropdown

6.   control_radio

7.   control_checkbox

8.   control_image

9.   control_fileupload

10.   control_button

11.   control_fullname

12.   control_email

13.   control_address

14.   control_phone

15.   control_datetime

16.   control_time

17.   control_birthdate

18.   control_number

19.   control_captcha

20.   control_rating

21.   control_scale

22.   control_spinner

23.   control_matrix

24.   control_collapse

25.   control_pagebreak

26.   control_hidden

27.   control_slider

28.   control_signature

29.   control_widget

Note: Some fields are not meant to be used in Question Mapper, they are parts of Jotform Form Builder's internal workings. Such as control_collapse and control_pagebreak. Also payment field types omitted.

[Top](https://www.jotform.com/developers/tools/?jfNext=1#)