Save Content using REST API - Documentation topics on: ajax,api,binary fields,categories,content,contentapi,contentlet,form building,jquery,json,rest,sample form code,uploading files,.

Save Content using REST API

DotCMS provides a REST api to search and render content - (Content API). DotCMS also allows a user to save content via JSON, XML and Form UrlEncoded data formats.

The base URL for saving content is http[s]://[host]:[port]/api/content

All content submission must include:

  • stInode: Content Type inode
    OR
  • stName: Content Type Velocity variable name. Human readable alternative to stInode
    AND

You define data for each field using the variable name of each field. Below is a list of data types in dotCMS and the supported/expected formats for each type:

  • Date format: Supports, in this order [ yyyy-MM-dd HH:mm , d-MMM-yy , MMM-yy , MMMM-yy , d-MMM , dd-MMM-yyyy , MM/dd/yyyy hh:mm aa , MM/dd/yy HH:mm , MM/dd/yyyy HH:mm , MMMM dd, yyyy , M/d/y , M/d , EEEE, MMMM dd, yyyy , MM/dd/yyyy , hh:mm:ss aa , HH:mm:ss , yyyy-MM-dd ]
  • Host/Folder Format: A host, e.g. demo.dotcms.com, a folder (for the host the user is on), e.g. /images/photos, or a combination of host and folder, e.g. demo.dotcms.com:/images/photos/
  • Categories: A comma separated list of category ids or category keys or category variable names
  • languageId: The id number of the language for the content item, e.g. 1. If this is not set, the default language will be used
  • Relationships: Takes the relationship name as the key and a lucene query as the value, e.g. News-Comments / +identifier:12321-123-123123
  • Related File/Image: The path to the related image, starting with the hostname - //demo.dotcms.com/images/photos/The-Gherkin-London-England.jpg
  • Tags: A comma separated list of tag values

The format of the content should be specified in the Content-Type header. Supported Content-Types include:

  • application/json
  • application/xml
  • application/x-www-form-urlencoded

Saving Files / Multipart Form Data

Sending multipart/form-data is also supported, which is required in order to send file content for binary fields. Then every body type with a Content-Disposition header is taken as a binary field value following the order of the binary fields in the Content Type. If there are two binary fields the first binary body type is assigned to the first binary field and the second to the other. It is not possible to skip a binary field value and continue assigning to other, later binary fields in a Content Type.

Working/Publishing

You specify if you want to save or publish the content based on the first parameter after the /content/ in the url: /api/content/[save|publish]/. If the URI contains the key 'publish' e.g., /api/content/publish/ then then content is published. In order to save but not publish any URI param can be passed in it will be ignored e.g., /api/content/save/. Note that a request to just /api/content/ will throw an error. It needs at least one URI param.

Workflows

If there is a workflow action name in the URI that matches the Content Type workflow schema at step 1 then the action is executed. If necessary 'wfActionComments' and/or 'wfActionAssign' are read from URI params. That's an action specific configuration.

Example: PUT /api/content/Assign%20for%20review/1/wfActionComments/hey%20take%20a%20look/wfActionAssign/dotCMS.org.7575

will execute "Assign for review" with comment "hey take a look" and will assign to the user with id "dotCMS.org.7575".

Response headers

On successful content creation 3 headers are returned:

  • Location: Location is a pointer to where the content can be obtained using the content rest api
  • Inode: The inode of the content version just saved
  • Identifier: The identifier of the content object just saved

Authentication

This API supports the same REST auth infrastructure as other rest apis in dotCMS. There are 4 ways to login.

  • user/xxx/password/yyy in the URI
  • Basic http authentication (base64 encoded)
  • DOTAUTH header similar to basic auth and base64 encoded, e.g. setHeader("DOTAUTH", base64.encode("admin@dotcms.com:admin"))
  • Session based for frontend or backend logged in user

Saving by Non-Authenticated Users

By default, only authenticated users may save content via the REST API.  To enable saving of content by non-authenticated (front-end) users, take all of the following steps:

Configuration

  • Set REST_API_CONTENT_ALLOW_FRONT_END_SAVING=true in the dotmarketing-config.properties file (in the plugins\com.dotcms.config\ROOT\WEB-INF\classes\ folder).

Permissions

  • Grant Add to permissions to the CMS Anonymous role on the Site.
  • Grant Edit permissions to the CMS Anonymous role on the Content Type.

Examples

Using JSON

Content creation using basic authentication.

curl -v -u admin@dotcms.com:admin -XPUT http://localhost:8080/api/content/publish/1 -H "Content-Type:application/json" -d '{
stInode:"2a3e91e4-fbbf-4876-8c5b-2233c1739b05",
languageId:1,
title:"test content",
contentHost:"demo.dotcms.com",
body:"test body"
}'

< HTTP/1.1 200 OK
< Server: Apache-Coyote/1.1
< Set-Cookie: JSESSIONID=86048BA25D7D6EB1F38649731C68CBE9; Path=/; HttpOnly
< Location: http://localhost:8080/api/content/inode/44a713ca-2bb5-4e8c-be5e-0be4f7056aab
< inode: 44a713ca-2bb5-4e8c-be5e-0be4f7056aab
< identifier: 1a617898-5d31-4157-931c-59f509d6439a
< Content-Type: text/plain
< Content-Length: 0

(some of the output is omitted)

Using Content Type variable name (stName) instead of inode (stInode) has the same result:

curl -v -u admin@dotcms.com:admin -XPUT http://localhost:8080/api/content/publish/1 -H "Content-Type:application/json" -d '{
stName:"webPageContent",
languageId:1,
title:"test content",
contentHost:"demo.dotcms.com",
body:"test body"
}'

Creating and then Updating an EXISTING piece of content

curl -v -u "admin@dotcms.com:admin" -XPUT http://localhost:8080/api/content/publish/1 -F 'json={ "stName":"webPageContent", "contentHost":"demo.dotcms.com", "title":"Test 001 - Created through curl", "body":"<b>Created through curl</b>" };type=application/json' < HTTP/1.1 100 Continue < HTTP/1.1 200 OK * Server Apache-Coyote/1.1 is not blacklisted < Server: Apache-Coyote/1.1 < Location: http://localhost:8080/api/content/inode/3227c025-4bb5-4947-843e-9dd2cb95a9dd < inode: 3227c025-4bb5-4947-843e-9dd2cb95a9dd < identifier: 699c969c-4be3-4f8d-9d80-da8ff0ab7c7d < Content-Type: text/plain < Content-Length: 0 < Date: Wed, 22 Jul 2015 20:42:24 GMT < * Connection #0 to host localhost left intact (some of the output is omitted) curl -v -u "admin@dotcms.com:admin" -XPUT http://localhost:8080/api/content/publish/1 -F 'json={ "identifier":"699c969c-4be3-4f8d-9d80-da8ff0ab7c7d", "stName":"webPageContent", "contentHost":"demo.dotcms.com", "title":"Test 001 - Created through curl", "body":"<b>Updated through curl</b>" };type=application/json' < HTTP/1.1 100 Continue < HTTP/1.1 200 OK * Server Apache-Coyote/1.1 is not blacklisted < Server: Apache-Coyote/1.1 < Location: http://localhost:8080/api/content/inode/644c5d16-e0b0-4d1e-a53d-16777197d73f < inode: 644c5d16-e0b0-4d1e-a53d-16777197d73f < identifier: 699c969c-4be3-4f8d-9d80-da8ff0ab7c7d < Content-Type: text/plain < Content-Length: 0 < Date: Wed, 22 Jul 2015 20:45:44 GMT < * Connection #0 to host localhost left intact (some of the output is omitted)


Using XML

curl -v -u admin@dotcms.com:admin -XPUT http://localhost:8080/api/content/publish/1 -H "Content-Type:application/xml" -d '
<content>
<stInode>2a3e91e4-fbbf-4876-8c5b-2233c1739b05</stInode>
<languageId>1</languageId>
<title>test content</title>
<contentHost>demo.dotcms.com</contentHost>
<body>test body</body>
</content>'

< HTTP/1.1 200 OK
< Server: Apache-Coyote/1.1
< Set-Cookie: JSESSIONID=3806974B823401EEDCB1916FF0469719; Path=/; HttpOnly
< Location: http://localhost:8080/api/content/inode/534c547e-dba9-458b-aef0-b977c7fc2a7e
< inode: 534c547e-dba9-458b-aef0-b977c7fc2a7e
< identifier: 52c81804-e789-48b3-b5c1-0de73a8cacea
< Content-Type: text/plain
< Content-Length: 0


Using Form UrlEncoded

curl -v -u admin@dotcms.com:admin -XPUT http://localhost:8080/api/content/publish/1 -H "Content-Type:application/x-www-form-urlencoded" -d 'stInode=2a3e91e4-fbbf-4876-8c5b-2233c1739b05&languageId=1&title=test%20content&contentHost=demo.dotcms.com&body=test%20body'

< HTTP/1.1 200 OK
< Server: Apache-Coyote/1.1
< Set-Cookie: JSESSIONID=9589AC9A470E506BC3ED3D779ABF9DF4; Path=/; HttpOnly
< Location: http://localhost:8080/api/content/inode/25942273-57c2-4aa3-bbad-710b7bf3b1bf
< inode: 25942273-57c2-4aa3-bbad-710b7bf3b1bf
< identifier: 11840c4a-57b7-4618-995d-dc935b2fe53b
< Content-Type: text/plain
< Content-Length: 0


Sending Categories

Categories can be specified using a comma separated list. Each is processed as category inode then as category key and finally as variable name.

Example adding a News content on demo (uploading categories variable names):

curl -v -u admin@dotcms.com:admin -XPUT http://localhost:8080/api/content/publish/1 -H "Content-Type:application/json" -d '{
stInode:"28039964-5615-4ccf-bb96-ded62adbcc6a",
languageId:1,
urlTitle:"a-new-news-item",
hostfolder:"demo.dotcms.com",
title:"A new news item",
byline: "this is a new story",
sysPublishDate: "2013-07-01 00:00:00",
story: "this is a new story uploaded from cURL",
topic: "investing,banking,research"
}'

< HTTP/1.1 200 OK
< Server: Apache-Coyote/1.1
< Set-Cookie: JSESSIONID=350BB6A31730E2EC3EF5B0A963B38F5E; Path=/; HttpOnly
< Location: http://localhost:8080/api/content/inode/b5b468f8-f304-4312-a566-5a294786a5a6
< inode: b5b468f8-f304-4312-a566-5a294786a5a6
< identifier: f5a13b1a-d0fc-4934-a6a5-9dc80aaf768d
< Content-Type: text/plain
< Content-Length: 0

Uploading Files for binary fields

Files can be uploaded using a multipart/form-data. Parts with json, xml or form/wwww-url-enconded data are taken as field values normally. Others with a header "Content-Disposition" set are added as binary field values using the same order as the fields. It means that if we have two binary fields and binary1 is before binary2 in field order then the first file to come in the request will be assign as binary1 then the second as binary2.

Example uploading a file asset. note the json part with attributes and the binary file using @:


curl -v -u admin@dotcms.com:admin 
  -XPUT http://localhost:8080/api/content/publish/1 
  -F "json={
    stName:'fileAsset',
    hostFolder:'demo.dotcms.com:/images',
    title:'nice.jpg',
    fileName:'nice.jpg'};
    type=application/json" 
  -F "file=@nice.jpg;
    type=application/jpg"
    

    < HTTP/1.1 100 Continue
    < HTTP/1.1 200 OK
    < Server: Apache-Coyote/1.1
    < Set-Cookie: JSESSIONID=1008EEB589168054CAF7C9E9C3D678A3; Path=/; HttpOnly
    < Location: http://localhost:8080/api/content/inode/197c5b4c-417a-4ba5-98e6-12f5cda1889b
    < inode: 197c5b4c-417a-4ba5-98e6-12f5cda1889b
    < identifier: fc2816da-107a-4c01-b404-bd552503f0f4
    < Content-Type: text/plain
    < Content-Length: 0

Sending Key/Value Pair Fields

A key/value pair field allows content contributors to submit a nearly unlimited amount of labels:values using a single field. In the following example, on a Content Type called "Television", a key/value pair field has the Velocity variable name of "productSpecifications". As shown in the example below, keys and values can be sent via REST API using the following form: fieldVelocityVariableName:{"mykey1:"myValue1","mykey2:"myValue2",... etc.}

See the curl example submit below. Note the handling of the "productSpecifications" key/value pair field:

curl -v -u admin@dotcms.com:admin -XPUT http://demo.dotcms.com/api/content/publish/1 -H "Content-Type:application/json" -d '{
   stName:"Television",
   languageId:1,
   contentHost:"demo.dotcms.com",
   brandAndModel:"Samsung UN65JS9500",
   resolution:"Ultra HD",
   screenSizeinches:"65",
   productSpecifications:{"Refresh Rate":"240 CMR (Effective)","Backlight":"LED","Smart Functionality":"Yes - Built in Wifi","Inputs":"2 HDMI, 2 USB"}
}'

Using Relationships

The relationship of a new item to an existing item can be specified by adding a field in the JSON data with the name of the dotCMS relationship. For example the Content Types "Blog" and "Comments" found in the demo site have a one to many relationship between them called "Blog-Comments". A new comment matching the parent Blog post can be added a "Blog-Comments" field in the JSON data, and adding a lucene query to the field to identify the blog content the comment will be linked with.

curl -v -u admin@dotcms.com:admin -XPUT http://localhost:8080/api/content/publish/1 -H "Content-Type:application/json" -d '{
   stName:"Comments",
   languageId:1,
   title:"test comment",
   email:"myemail@mydomain.com",
   comment:"this is my cool comment",
   Blog-Comments:"+contentType:Blog +title:picks"
}'

The comment should appear in the post "Bill Ackman's Top Stock Picks" that comes by default in the starter. It will leave some fields empty as we only send those required by the Content Type.

See the Example Employee Profile form with Relationship and Binary field below.


Creating content from jQuery

This example uses jQuery.ajax for creating content in a custom Content Type. Such content can be sent to dotCMS, making it possible to create rich Ajax applications within dotCMS.

Consider this example Blogpost Content Type:

An example Blogpost Content Type to be used in the jquery example

With a detail page at /Blogpost/{title}. Note that in a real world application a "wiki title" would be used instead.

Below is an example page that uses jquery to post data to dotCMS. This is the page in its entirety, and this code can be cut and pasted into a blank template, for example purposes. What we do is capture the form data as a json object, then PUT that data to the dotCMS server via an $.ajax call. If you have set up the Content Type as you see above, this will create a new content object with the values that were passed in.

<html>
  <head>
    <title>dotCMS REST Content Save</title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

    <script type="text/javascript" >

      $(document).ready(function() {

        $("#newPost").submit(function(e) {
          e.preventDefault();

          var dataObj={'title': $('#title').val(),
          'publishDate': $('#publishDate').val(),
          'body': $('#body').val(),
          'categories': $('#categories').val().join(','),
          'tags': $('#tags').val(),
          'stName':'Blogpost'};

          $.ajax({
            url: '/api/content/publish/1',
            type: 'PUT',
            cache:false,
            data: dataObj,          
            beforeSend: function (request){
              // This sends the user who authenticates against the dotCMS server
              // In a real world example, you could use session based authentication
              request.setRequestHeader("DOTAUTH", window.btoa("admin@dotcms.com:admin"));
            },

            success: function(data,status,xhr) {
              alert("Success: "   );
              window.location = "/Blogpost/"+$('#title').val();
            },
            error: function(data,status,xhr) {
              alert("fail: " + data );
            console.log(data );
            },
          });
        });
      });

    </script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <form id="newPost" action="">
          <label for="title">Title</label>
          <input type="text" name="title" id="title"/>

          <label for="publishDate">Publish Date</label>
          <input type="text" name="publishDate" value="2013-07-28 10:34" id="publishDate"/>

          <label for="categories">Categories</label>
          <select id="categories" name="categories" multiple="multiple">
            <option value="design">Design</option>
            <option value="development">Development</option>
            <option value="frontEndDevelopment">Front End Development</option>
            <option value="nosql">NoSQL</option>
            <option value="projectManagement">Project Management</option>
          </select>

          <label for="mainimg">Main Image</label>
          <input type="file" name="mainImage" id="mainImage"/>

          <label for="tags">Tags</label>
          <input type="text" name="tags" id="tags"/>

          <label for="body">Body</label>
          <textarea id="body" name="body"></textarea>
          <div>
          <input type="submit" class="btn" id="Post" name="Post" value="Post"/>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

Note that using velocity and categories viewtool the option list for categories can be generated automatically.

It will create the content and redirect the page to its detail page. Note that we let jquery encode the data as application/x-www-form-urlencoded that is the default.

In order to send the binary file we need to construct a FormData object in javascript. This API can be found in all modern browsers and is pretty safe to use.

$(document).ready(function() {
$("#newPost").submit(function(e) {
e.preventDefault();

var dataform=new FormData();

var json={'title': $('#title').val(),
'publishDate': $('#publishDate').val(),
'body': $('#body').val(),
'categories': $('#categories').val().join(','),
'tags': $('#tags').val(),
'stName':'Blogpost'};
dataform.append('json',JSON.stringify(json))

dataform.append('file', document.getElementById('mainImage').files[0]);


$.ajax({
url: '/api/content/publish/1',
type: 'PUT',
data: dataform,
processData: false,
contentType: false,
success: function(data,status,xhr) {
window.location = "/Blogpost/"+$('#title').val();
}
});
});
});

We need to disable processData and contentType in the call to jquery.ajax. That way a multipart/form-data request is sent to the server. Note that we add the json data to the dataform with the name "json". Server side it is understood that the value is json encoded data. Due to limitations in the FormData interface we can't set the content-type of that body part and is by default set to text/plain. So server side it is processed as json if the content-type match or the name of the body part is 'json'. The same procedure is done for 'xml' and 'urlencoded'.

When sending several binary files in the FormData object make sure to respect the binary files order as mentioned earlier in this documentation.

Example Employee Profile form with Relationship and Binary field


	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

		<script type="text/javascript" >
		  $(document).ready(function() {
			$("#submitEmployee").submit(function(e) {

			  e.preventDefault();

				var dataObj={        
				  'ipAddress': "$request.getRemoteAddr()",
				  'stName':'Employee',
				  'Department-Employee': '+structureName:Department +identifier:' + id
				};
				
				if($('#department').val() != undefined && $('#department').val().length > 0 && $('#department').val() != 'Select your Department'){
						dataObj.identifier = $('#department').val();
					} else {
						alert("Please select a department");
						$( "button" ).removeClass( "disabled" ).addClass( "btn-primary" );
						return;
					}
			//How to use the FormData() - https://developer.mozilla.org/en/docs/Web/API/FormData	
			var dataform=new FormData();
			
				if($('#firstName').val() != undefined && $('#firstName').val().length > 0){
				  dataObj.firstName = $('#firstName').val();
				}
				if($('#lastName').val() != undefined && $('#lastName').val().length > 0){
				  dataObj.lastName = $('#lastName').val();
				}
				dataObj.gender = $('input[name=gender]:checked').val();

				if($('#jobTitle').val() != undefined && $('#jobTitle').val().length > 0){
				  dataObj.jobTitle = $('#jobTitle').val();
				}
				if($('#phone').val() != undefined && $('#phone').val().length > 0){
				  dataObj.phone = $('#phone').val();
				}
				if($('#email').val() != undefined && $('#email').val().length > 0){
				  dataObj.email = $('#email').val();
				}
				if($('#mobile').val() != undefined && $('#mobile').val().length > 0){
				  dataObj.mobile = $('#mobile').val();
				}
				if($('#fax').val() != undefined && $('#fax').val().length > 0){
				  dataObj.fax = $('#fax').val();
				}
				if($('#userId').val() != undefined && $('#userId').val().length > 0){
					dataObj.userId = $('#userId').val();
				}
				dataObj.seniorManagement = $('#seniorManagement').is(':checked')
				//convert the dotObject map to a json object
				##Create a json key using json as value map and something already expected
				dataform.append('json',JSON.stringify(dataObj))
				
				//append the binary file to the json object - If more than one binary field is present on the Content Type, files should be appended ***in order that the binary fields occur on the Content Type**
				##will append file as photo, photo(1), photo(2), etc., in order
				dataform.append('file', document.getElementById('photo').files[0]);

				$('requestBtn').attr('disabled', true);
				$('requestBtn').prop('disabled', true);
				$( "button" ).removeClass( "btn-primary" ).addClass( "disabled" );
				$.ajax({
				  url: '/api/content/publish/1',
				  type: 'PUT',
				  cache:false,
				  data: dataform,
// see article here http://www.mattlunn.me.uk/blog/2012/05/sending-formdata-with-jquery-ajax - on avoiding non-strings being sent thru jQuery.param() by setting processData and contentType to false
				  processData: false,
				  contentType: false,
				  
					beforeSend: function (request){
				   //This sends the user who authenticates against the dotCMS server
				   //In a real world example, you could use session based authentication
				  request.setRequestHeader("DOTAUTH", window.btoa("admin@dotcms.com:admin"));
				},       

				  success: function(data,status,xhr) {
					console.log("works!");
					var a = xhr.getAllResponseHeaders();
		var id = a.substring(a.indexOf('identifier: ') + 'identifier: '.length , a.indexOf('\n', a.indexOf('identifier: ') + 'identifier: '.length));
							//redirect to thank you page, passing identifier of employee					
							window.location="/about-us/our-team/success?id="  + id;
						},
						
				  error: function(data,status,xhr) {
					$('requestBtn').attr('disabled', false);
					$('requestBtn').prop('disabled', false);
					$( "button" ).removeClass( "disabled" ).addClass( "btn-primary" );
					console.log(data);
					alert("Uh Oh, your request failed. Please check your entries and try again");
				  },
			  }); //End of submit employee function
			}); //End document.ready
 
		</script>

<div class="form-container">

		<!-- Form Name -->

		<hr>

		<form class="form-horizontal"  role="form"  id="submitEmployee">
		  <input type="hidden" name="stName" value="Employee">
		  <input type="hidden" name="languageId" value="1">
		  <input type="hidden" name="contentHost" value="demo.dotcms.com">

			<div class="form-group">
				<label class="col-sm-3 control-label" for="firstName" class="required">First Name: <span class="required">*</span></label>
				<div class="col-sm-8">
					#if($user)
						<input id="firstName" class="form-control" type="text"  name="firstName"  value="$user.firstName">
					#else
						<input id="firstName" class="form-control" placeholder="Enter your first Name" type="text"  name="firstName"  value="">
					#end
				</div>
			</div>
	
			<div class="form-group">
				<label class="col-sm-3 control-label" for="lastName">Last Name: <span class="required">*</span></label>
				<div class="col-sm-8">
					#if($user)
						<input id="lastName" class="col-sm-12" name="lastName" type="text" placeholder="$user.lastName" value="$user.lastName" required>
					#else
						<input id="lastName" class="col-sm-12" name="lastName" type="text" placeholder="Enter your last name" value="" required>
					#end
				</div>
			</div>
			
			<div class="form-group">
				<label class="col-sm-3 control-label" for="gender">Gender: </label>
				<div class="col-sm-8">
					<input type=radio id="genderMale"  name="gender" value="male" checked="true"> <label for="genderMale">Male</label> &nbsp;&nbsp;
					<input type=radio id="genderFemale"  name="gender" value="female" > <label for="genderFemale">Female</label> &nbsp;&nbsp;
				</div>
			</div>
			
			<div class="form-group">
				<label class="col-sm-3 control-label" for="jobTitle">Job Title: </span></label>
				<div class="col-sm-8">
					<input id="jobTitle" class="col-sm-12" name="jobTitle" type="text" placeholder="Job Title" value="">
				</div>
			</div>
			
			<div class="form-group">
				<label class="col-sm-3 control-label" for="email">Email: </span></label>
				<div class="col-sm-8">
					#if($user)
						<input id="email" class="col-sm-12" name="email" type="text" value="$user.emailAddress">
					#else
						<input id="email" class="col-sm-12" name="email" type="text" placeholder="Email" value="">
					#end
					
				</div>
			</div>
			
			<div class="form-group">
				<label class="col-sm-3 control-label" for="phone">Phone: </span></label>
				<div class="col-sm-8">
					<input id="phone" class="col-sm-12" name="phone" type="text" placeholder="Phone Number" value="">
				</div>
			</div>
			
			<div class="form-group">
				<label class="col-sm-3 control-label" for="mobile">Mobile: </span></label>
				<div class="col-sm-8">
					<input id="mobile" class="col-sm-12" name="mobile" type="text" placeholder="Mobile" value="">
				</div>
			</div>
			
			<div class="form-group">
				<label class="col-sm-3 control-label" for="fax">Fax: </span></label>
				<div class="col-sm-8">
					<input id="fax" class="col-sm-12" name="fax" type="text" placeholder="Fax" value="">
				</div>
			</div>
			
			<div class="form-group">
				<label class="col-sm-3 control-label" for="seniorManagement">Management: </span></label>
				<div class="col-sm-8">
					<input type="checkbox" class="col-sm-12" name="seniorManagement" id="seniorManagement" type="text" value="">
				</div>
			</div>
			
			<div class="form-group">
				<label class="col-sm-3 control-label" for="photo">Photo: </span></label>
				<div class="col-sm-8">
					<input type="file" class="col-sm-12" name="photo" id="photo" type="text" placeholder="photo" value="">
				</div>
			</div>
			##select the related Department data
			<div class="form-group">
				<label class="col-sm-3 control-label" for="fund">Department: </label>
				<div class="col-sm-8">
					<select class="form-control col-sm-12" id="department" name="department" required>
						<option>Select your Department</option>
						#foreach($department in $dotcontent.pull("+structureName:Department +(conhost:48190c8c-42c4-46af-8d1a-0cd5db894797 conhost:SYSTEM_HOST)",0,"Department.departmentName"))
							<option value="$department.identifier">$department.departmentName</option>
						#end
					</select>
				</div>
			</div>
			#if($user)
				<input type="hidden" name="userId" id="userId" value="$user.userId">
			#end

			<hr>

			<!-- Button -->
			<div class="text-center">
				<button id="requestBtn" name="singlebutton" class="btn btn-primary btn-large">Submit Profile</button>
			</div>

		</form>
	</div>  ##end of form container