Documentation / Tutorials / Tutorials & How to’s

Rapid Application Development

/ Tutorials & How to’s / Rapid Application Development

At the end of this tutorial, you should be able to setup a complete workflow.
In this tutorial, we will be taking the example of "Careers" workflow.

Before we get started with the workflow creation process, you need to have the following setup ready:

  • Latest WordPress
  • Plugins:
    • Custom Post Type UI
    • Advanced Custom Fields
    • Awesome Studio (requires PHP 7)
  • Themes:

Once this is done, edit you user account and grant yourself "Developer Access" under "Awesome UI Control"

Now that you are all set, let's dive in.

Firstly we need to add data which will show up on our "Careers" page. For that we need 2 CPTs, one which will hold the "Jobs" data and the other to hold the "Job Application" entries.
In this example, we will use "Custom Post Type UI" & "Advanced Custom Fields" plugin s to create and manage CPTs, Taxonomies & Meta fields.

Step 1:
Add CPT "as_job" from CPTUI.
Configure the CPT to have the following settings:

{
	"plural_label" : "Jobs Openings",
	"singular_label" : "Jobs Opening",
	"public" : true,
	"exclude_from_search":true,
	"publicly_queryable":true,
	"show_in_nav_menus":false,
	"show_ui" : true,
	"show_in_menu" : true,
	"capability_type" : "post",
	"map_meta_cap" : true,
	"hierarchical" : false,
	"query_var" : true,
	"supports" : [ "title","editor","page-attributes","thumbnail" ],
	"rewrite" : {"slug":"job"}
}

Add Taxonomies "job_department", "job_group" and "job_location" one by one from CPTUI.
Configure each Taxonomy to have the following settings:

{   
	"plural_label" : "Departments/Groups/Job Locations",
	"singular_label" : "Department/Group/Job Location",
	"hierarchical" : true,
	"show_ui":true,
	"show_admin_column":false,
	"show_in_nav_menus":false,
	"query_var" : true,
	"rewrite" : true
}

Note: You don't need to use the above JSON codes, just refer to the values of the options and use that in the form while adding the CPTs and Taxonomies.

Now we add Meta fields for "Job" CPT using "Custom Fields".
Add new Field Group. Name it "Job Details".
Add following fields by clicking "+ Add Field" button.

{
	"name":"Job ID",
	"id"   : "job_id",
	"type":"text"
}
{
	"name":"Job Qualification",
	"id"   : "job_qualification",
	"type":"wysiwyg"
}
{
	"name":"Job Salary",
	"id"   : "job_salary",
	"type":"text"
}

Note: You don't need to use the above JSON codes, just refer to the values of the options and use that in the form while adding the Custom Fields.

Now that we are ready to collect the Job Opening data, let's proceed with creating CPT for collecting all the "Job Applications".

Step 2:

Add CPT “job_application” from CPTUI.
Configure the CPT to have the following settings:

{
	"plural_label" : "Jobs Applications",
	"singular_label" : "Jobs Application",
	"public" : true,
	"exclude_from_search":true,
	"publicly_queryable":true,
	"show_in_nav_menus":false,
	"show_ui" : true,
	"show_in_menu" : true,
	"capability_type" : "post",
	"map_meta_cap" : true,
	"hierarchical" : false,
	"query_var" : true,
	"supports" : [ "title","editor","custom-fields" ]
}

Note: You don't need to use the above JSON code, just refer to the values of the options and use that in the form while adding the CPT.

Step 3:
Install "Blank App" from "Catalogue" which you will find under "Awesome Studio" menu item.
Add "App Name" as "Careers"
Add "App Slug" as "careers"

Step 4:
Add new "Careers Module" for each

Title - careers-listing
This module is used in the Home page of the app. It will list all the Job Openings currently published.

[aw2.client less]
@color_1: #23527c;
@background_color_1: #eee;
@border_color_1: #ddd;

.simple-pagination {
  ul{
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
  
  
	>li {
  	display:inline-block;
		>a {
		  position: relative;
			float: left;
			padding: 6px 12px;
			margin-left: -1px;
			line-height: 1.42857143;
			color: @color_1;
			text-decoration: none;
			background-color: #fff;
			border: 1px solid #ddd;
		
			&:focus {
				z-index: 2;
				color: @color_1;
				background-color: @background_color_1;
				border-color: @border_color_1;
			}
			&:hover {
				z-index: 2;
				color: @color_1;
				background-color: @background_color_1;
				border-color: @border_color_1;
			}
		}
		>span {
		  position: relative;
			float: left;
			padding: 6px 12px;
			margin-left: -1px;
			line-height: 1.42857143;
			color: @color_1;
			text-decoration: none;
			background-color: #fff;
			border: 1px solid #ddd;
			
			&:focus {
				z-index: 2;
				color: @color_1;
				background-color: @background_color_1;
				border-color: @border_color_1;
			}
			&:hover {
				z-index: 2;
				color: @color_1;
				background-color: @background_color_1;
				border-color: @border_color_1;
			}
		}
	}
	}
}
[/aw2.client]

<main class="container">
  <article role="module" module_type='career' title="career home">
    <header class="jumbotron text-center pad-10 background-none">
      <h1>[aw2.get module.herotitle /]</h1>
      <small>[aw2.get module.herotext /]</small>
    </header>
    <section class="">
      <div class="well clearfix">
        <div class="col-md-6">
          <img class="img-responsive" src="[aw2.get module.image /]" alt="image"/>
        </div>
        <div class="col-md-6">
          <h2 class="text-left">[aw2.get module.title /]</h2>
          <p>[aw2.get module.description /]</p>
        </div>
      </div>
      <div class="row">
        [aw2.get function.get_option p1="posts_per_page" set="posts_per_page"/]
        [aw2.set paged="1" /]
        [aw2.if cond="{{aw2.get qs.0}}" equal="page"]
          [aw2.set paged="{{aw2.get qs.1}}" /]
        [/aw2.if]
        [aw2.if cond="{{aw2.get qs.0}}" not_equal="page"]
          [aw2.set module.app_status="{{aw2.get qs.0}}" /]
        [/aw2.if]
        [aw2.if cond="{{aw2.get qs.1}}" equal="page"]
          [aw2.set paged="{{aw2.get qs.2}}" /]
        [/aw2.if]
      
        [aw2.query posts_builder part=start]
          {
          	"posts_per_page": [aw2.get posts_per_page /],
          	"post_type": "as_job",
          	"post_status": "publish",
          	"order": "DESC",
          	"paged" : "[aw2.get request.paged /]",
          	"orderby": "date"
          }
        [/aw2.query]
        [aw2.query posts_builder part=run set="module.results" /] 
        
        [aw2.get function.strstr p1="{{aw2.get url}}" p2="/page" p3="true" set="pgurl"/]
          
        [aw2.get function.trim p1="{{aw2.get pgurl}}" set="module.trimpgurl"/]
          
        [aw2.empty module.trimpgurl]
          [aw2.set paginationurl="{{aw2.get url}}" /]
        [/aw2.empty]
        [aw2.not_empty module.trimpgurl]
          [aw2.set paginationurl="{{aw2.get module.trimpgurl}}" /]
        [/aw2.not_empty]  
          
        [aw2.get function.strstr p1="{{aw2.get paginationurl}}" p2="/home" p3="true" set="module.homecheck"/]
        [aw2.get function.trim p1="{{aw2.get module.homecheck}}" set="module.fhomecheck"/]
  
        [aw2.get function.rtrim p1="{{aw2.get paginationurl}}" p2="/" set="paginationurl" /]  
            
        [aw2.if cond="{{aw2.get module.fhomecheck}}" equal=""]  
          [aw2.set paginationurl="{{aw2.get paginationurl}}/" /]
        [/aw2.if]
        [aw2.else]
          [aw2.set paginationurl="{{aw2.get paginationurl}}" /]
        [/aw2.else] 

      
        [aw2.loop module.results.posts]
          <article class="col-md-6">
              <header>
                <h2>[aw2.get item.post_title] 
                  [aw2.if not_empty='{item.taxonomy.names.job_group}']  
                    <small><span class="label label-primary"> [aw2.get item.taxonomy.names.job_group.comma /]</span></small>
                  [/aw2.if]
                </h2>
              </header>

              <section>
                <div>
                	<span><strong>Location: </strong>[aw2.get item.taxonomy.names.job_location.comma /]  </span>
                	[aw2.if not_empty='{item.taxonomy.names.job_department}'] <br>
                    <strong>Department:</strong> [aw2.get item.taxonomy.names.job_department.comma /]<br>
                  [/aw2.if]
                	[aw2.if not_empty='{item.meta.job_salary}'] <span><strong>Salary: </strong>[aw2.get item.meta.job_salary /]</span>  [/aw2.if]
                </div>
                <p>[aw2.get item.post_content]</p>
              </section>
                
              <footer>
                <a class="btn btn-primary" href="[aw2.get app.path]/[aw2.get item.post_name /]">View Job</a>
              </footer>
              
          </article>
        [/aw2.loop]  
      </div>
    </section>
    [aw2.if cond="{{aw2.get module.results.found_posts}}" greater_than="2"]
     <footer class="container">
       <nav aria-label="Page navigation">
        <div class="js-simple-pagination"></div>
      <div class="gap-5"></div>
      </nav>
      <footer>
    [/aw2.if]
  </article>
</main>
<script type="spa/axn" axn="sme_pagination_api.simple_pagination"  simple_pagination='.js-simple-pagination'
  url="[aw2.get paginationurl]/page/"
  per_page_count='[aw2.get request.posts_per_page]'
  total_records='[aw2.get module.results.found_posts]'
  current_page='[aw2.get request.paged default=1]'></script>

Title - careers-single
As the name suggests, this module is used to show detail view of our Job Opening.

[aw2.get post.taxonomy.ids.job_department set="module.job_department_ids" /]
[aw2.loop module.job_department_ids ]
  [aw2.set myids='{{aw2.get item }}'/]
[/aw2.loop]
  
<main class="container">
  <article role="module" module_type='career' title="career home">
    <header class=" text-center pad-10">
      <h1>Job vacancies</h1>
    </header>
    <section role="content" class="pad-10">
      <h2 class="text-left"></h2>
      <div class="col-md-8">
        <article>
          <header>
            <h2>[aw2.get post.post_title /]
              [aw2.if not_empty='{post.taxonomy.names.job_group}']  
                <small><span class="label label-primary"> [aw2.get post.taxonomy.names.job_group.comma /]</span></small>
              [/aw2.if]
            </h2>
              [aw2.if not_empty='{post.taxonomy.names.job_department}'] <br>
                <strong>Category:</strong> [aw2.get post.taxonomy.names.job_department.comma /]
              [/aw2.if]
          </header>
          <section>
            <p>
              [aw2.if not_empty='{post.taxonomy.slugs.job_location}'] <span><strong>Location: </strong>[aw2.get post.taxonomy.names.job_location.comma /]   </span> <br> [/aw2.if]
              [aw2.if not_empty='{post.meta.job_salary}'] <span><strong>Salary: </strong>[aw2.get post.meta.job_salary /]   </span> 
            </p>
            <p>[aw2.get post.post_content /]</p>
            <strong>Qualification</strong>
            <p>[aw2.get post.meta.job_qualification /]</p>
          </section>
          <footer>
            <a class="btn btn-primary" id="myModal">Apply</a>
            <div class="gap-5"></div>
            <div class="" id="myModalshow" style="display:none;">
              [aw2.module slug="job-application-form" job_title="{post.post_title}" job_id="{post.ID}" /]
            </div>
            <script>
              $(document).ready(function(){
                $("#myModal").click(function(){
                  $("#myModalshow").show();
                });
              });
            </script>
          </footer>
        </article>
      </div>
      <div class="col-md-4">
        <section class="pad-5">
          [aw2.get post.taxonomy.slugs.job_department separator='","' set="module.job_department" /]
          [aw2.query posts_builder part=start]
            {
              "posts_per_page": -1,
              "post_type": "as_job",
              "post_status": "publish",
              "post__not_in":[ [aw2.get post.ID] ], 
              "order": "DESC",
              "orderby": "date"
            }
          [/aw2.query]
          [aw2.query posts_builder part=tax_query]
            {
            "taxonomy": "job_department",
            "field": "slug",
            "terms": [ "[aw2.get module.job_department /]" ]
            }
          [/aw2.query] 
          [aw2.query posts_builder part=run set="module.results" /]
          <div class="list-group">
            <h3 class="list-group-item ">Related Jobs</h3>
              [aw2.loop module.results.posts]
                <a class="list-group-item" href="[aw2.get app.path /]/[aw2.get item.post_name /]">[aw2.get item.post_title /] </a>
              [/aw2.loop]
          </div>
        </section>
      </div>
    </section>
  </article>
</main>

Title - job-application-form
As the name suggests, this module is used for applying for the Job Opening.

[aw2.template main]
  <div class="col-md-12">
    <form  class="job-message" role="job-application">
      [aw2.run awesome_form.hidden
                 name="job_application|meta|job_id" 
                 id="job_application|meta|job_id"
                 class="form-control"
                 value="{module.job_id}"
                 /]
      [aw2.run awesome_form.readonly
                 name="job_application|meta|job_title" 
                 id="job_application|meta|job_title"
                 placeholder="Job Title*"
                 required="required"
                 col_class="col-sm-12"
                 class="form-control"
                 value="{module.job_title}"
                 /]
      [aw2.run awesome_form.text
                 name="job_application|meta|applicant_name" 
                 id="job_application|meta|applicant_name"
                 placeholder="Name*"
                 required="required"
                 col_class="col-sm-12"
                 class="form-control"
                 /]
      [aw2.run awesome_form.email
             name="job_application|meta|applicant_email" 
             id="job_application|meta|applicant_email"
             placeholder="Email*"
             required="required"
             col_class="col-sm-12"
             class="form-control"
             /]
      [aw2.run awesome_form.mobile
           name="job_application|meta|applicant_phone" 
           id="job_application|meta|applicant_phone"
           placeholder="Phone*"
           required="required"
           col_class="col-sm-12"
           class="form-control"
           /]
      [aw2.run awesome_form.textarea
       name="job_application|post|post_content" 
       id="job_application|post|post_content"
       placeholder="Description*"
       required="required"
       col_class="col-sm-12"
       class="form-control"
       /]
               
         <div class="col-xs-12  pad-y-2">
          <input type="submit" id="submitform" value="SUBMIT" class="btn brand-primary-bg font-size-base font-medium brand-white pad-x-7 job-app-submit">
        </div>
      </form>
  </div>
    <script  type=spa/axn 
	  axn='form.ajax'
	  bind='submit'
	  bind_selector="form[role='job-application']" 
	  route_ajax='[aw2.get module.slug /].save_job_application' 
	  disable_selector='.job-app-submit'
	  ></script>
  [/aw2.template]
[aw2.template save_job_application]
 [aw2.get function.nl2br p1='{{aw2.get request.job_application|post|post_content}}' set='module.comment'/]

    [aw2.get function.str_replace p1="rn" p2="" p3='{{aw2.get module.comment}}' set="module.comment"/]
      
    [aw2.save_form tag='job_application' set_post_id='module.job_application']
    {
    "post_type":"job_application",
    "post_status":"publish",
    "post_title":"Application for [aw2.get request.job_application|meta|job_title /] by [aw2.get request.job_application|meta|applicant_name /]"
    }
    [/aw2.save_form]
    
    [aw2.query set_post_terms post_id="{module.job_application}" taxonomy='application_status' slugs='applied' /]
    
    [aw2.wp_mail part=start]
        {
        	"to":"[aw2.get app.options.opt-adminmail /]",
        	"subject":"Application for [aw2.get request.job_application|meta|job_title /]"
        } 
    [/aw2.wp_mail]
  
    [aw2.wp_mail part=message]
      <div class="none">Dear Admin,</div>
      <p class="none">You have an new Job Application. Please check out the details below.</p>
      <div class="none"><strong>Job Title: </strong>[aw2.get request.job_application|meta|job_title /] </div>
       <div class="none"><strong>Name: </strong>[aw2.get request.job_application|post|post_title /] </div>
       <div class="none"><strong>Email ID: </strong>[aw2.get request.job_application|meta|email /]</div>
      <div class="none"><strong>Phone: </strong>[aw2.get request.job_application|meta|phone /] </div>
      <div class="none"><strong>Description: </strong>[aw2.get module.comment /]</div>
      <p></p>
      <div class="none">Warm Regards,</div>
      <div class="none">[aw2.get function.get_option p1='blogname' /]</div>
    [/aw2.wp_mail]
  
    [aw2.wp_mail part=run][/aw2.wp_mail]
    
    <template axn=selector.replace selector='.job-message' get='me.html'>
      <div class="gap-10"></div>
      <h4 class="text-center pad-y-10 col-md-8 col-md-offset-2">Thanks for showing interest in us! We will get back to you soon. </h4>
      <div class="gap-4"></div>
    </template>
    
[/aw2.template]

Step 5:
Add new "Careers Pages"
Title - Home

[aw2.module slug='careers-listing']
    [aw2.this herotitle="Matchup your skills" /]
    [aw2.this herotext="Apply for Jobs" /]
    [aw2.this herobuttonlink="#"]
    [aw2.this title="QUICK TIPS FOR JOB APPLICATION" /]
    [aw2.this description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rhoncus eros eu venenatis ultrices. Morbi a viverra turpis. Curabitur convallis faucibus orci, sit amet sollicitudin justo volutpat vitae. Nam non pellentesque odio, eget auctor arcu. Aliquam erat volutpat. Donec odio mi, pretium in volutpat a, commodo placerat sem. Vestibulum at scelerisque sapien. Fusce in iaculis metus, ac finibus dolor. <strong>Duis quis lobortis mi.</strong> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla pharetra volutpat purus non fermentum." /]
    [aw2.this image="http://demo.getawesomestudio.com/wp-content/uploads/2017/03/bluetoad.jpg" /]
[/aw2.module]

Title - Single

[aw2.module slug='careers-single' /]

Step 6:
Add new "Careers Trigger".
This is needed, as each App may have different owner. For example, in our case the owner of the App will be somebody from the HR department. The email that is sent in Step 4 will use the email saved in this form.

[aw2.register app_option part=start]
{
	"id"           :"admin-mail-settings",
	"title"         :"App Email Settings",
	"show_on"  :  { 
	                "key":"options-page",
	                "value":"[aw2.get module.original_slug]_options"
	              },
	"show_names" : true
}
[/aw2.register]

[aw2.register app_option part=field]
{
	"name":"Admin Email Id",
	"id"   : "opt-adminmail",
	"type":"text",
	"desc"    : "Add Admin Email Id."
}
[/aw2.register]

With the above steps followed correctly, we are ready with our frontend of our "Careers" workflow.

Now comes the need to have a "Manage Jobs" App.

You will ask the question "Why do we need another App? Why can't we just allow users to work with WordPress Admin Dashboard and manage stuff?".
Answer is "Simple". Right, to make it simple, easier, no-brainer for users who are non-technical or not familiar with WordPress Admin Dashboard.

By having this App, we basically cut the learning curve that is needed by such users.

So, let's move on.

Step 7:
First we need to define our Contents which we will show under the "Manage Jobs" App.
Add CPT "content_model" from CPTUI.
Configure the CPT to have the following settings:

{
	"plural_label" : "Content Models",
	"singular_label" : "Content Model",
	"public" : true,
	"exclude_from_search":true,
	"publicly_queryable":true,
	"show_in_nav_menus":false,
	"show_ui" : true,
	"show_in_menu" : true,
	"capability_type" : "post",
	"map_meta_cap" : true,
	"hierarchical" : false,
	"query_var" : true,
	"supports" : [ "title","editor" ]
}

Note: You don't need to use the above JSON code, just refer to the values of the options and use that in the form while adding the CPT.

Step 8:
Add New "Content Model" for each of the following
Title - job-openings-app
This will be used to define the columns for Job Openings

//******Columns *************************//

//******Meta Columns *************************//

//******Custom Columns *************************//
[aw2.set_array module.view.columns.job_id type=custom name='Job Opening ID' /]
[aw2.raw set=module.view.columns.job_id.custom]
<a href="[aw2.get app.path /]/job-opening/[aw2.get module.row.ID /]" target="_blank">[aw2.get module.row.ID /]</a>
[/aw2.raw]

[aw2.set_array module.view.columns.job_title type=custom name='Job Title' /]
[aw2.raw set=module.view.columns.job_title.custom]
<a href="[aw2.get app.path /]/job-opening/[aw2.get module.row.ID /]" target="_blank">[aw2.get module.row.post_title not_empty='{module.row.ID}'/]</a>
[/aw2.raw]

//****** Filters *************************//

//******Taxonomy Filters *************************//

//******Date and Search Filters *************************//
[aw2.set_array module.view.filters.s type=s name='Search' /]

//******Custom Filters *************************//

//****** Default Settings for Query *************************//
[aw2.set_array module.view.wp_query posts_per_page=10 post_type=as_job post_status=any order=DESC orderby=ID /]

Title - job-applications-app
This will be used to define the columns for Job Applications

//******Columns *************************//

//******Meta Columns *************************//
[aw2.set_array module.view.columns.job_title type=meta name='Job Title' /]

//******Taxonomy Columns *************************//
[aw2.set_array module.view.columns.application_status type=taxonomy name='Job Application Status' /]

//******Custom Columns *************************//
[aw2.set_array module.view.columns.application_id type=custom name='Application Id' /]
[aw2.raw set=module.view.columns.application_id.custom]
<a href="[aw2.get app.path /]/application/[aw2.get module.row.ID /]" target="_blank">[aw2.get module.row.ID /]</a>
[/aw2.raw]

[aw2.set_array module.view.columns.date type=custom name='Date' /]
[aw2.raw set=module.view.columns.date.custom]
[aw2.get module.row.post_date date_format="d F Y"/]
[/aw2.raw]

[aw2.set_array module.view.columns.comment type=custom name='Comments' /]
[aw2.raw set=module.view.columns.comment.custom]
[aw2.get module.row.meta.comments.strip_tags/]
[/aw2.raw]

[aw2.set_array module.view.columns.applicant_details type=custom name='Applicant Details' /]
[aw2.raw set=module.view.columns.applicant_details.custom]
<div>[aw2.get module.row.meta.applicant_name not_empty='{module.row.meta.applicant_name}'/]</div>
<div>[aw2.get module.row.meta.applicant_email not_empty='{module.row.meta.applicant_email}'/]</div>
[/aw2.raw]

//****** Filters *************************//

//******Meta Filters *************************//

//******Taxonomy Filters *************************//
[aw2.set_array module.view.filters.application_status type=taxonomy name='Application Status'/]

//******Date and Search Filters *************************//

[aw2.set_array module.view.filters.search type=search name='Search' /]
[aw2.raw set=module.view.filters.search.custom]
[aw2.set_array module.wp_query.meta_query.new key="applicant_name" value='{module.filter_value}' compare= "LIKE"/]
[aw2.set_array module.wp_query.meta_query.new key="applicant_email" value='{module.filter_value}' compare= "LIKE"/]
[aw2.set_array module.wp_query.meta_query.new key="company_name" value='{module.filter_value}' compare= "LIKE"/]
[aw2.set_array module.wp_query.meta_query.new key="position" value='{module.filter_value}' compare= "LIKE"/]
[aw2.set module.wp_query.meta_query.relation="OR"/]
[/aw2.raw]

//******Custom Filters *************************//

//****** Default Settings for Query *************************//
[aw2.set_array module.view.wp_query posts_per_page=10 post_type=job_application post_status=publish order=DESC orderby=post_date/]

Title - definitions
This will be used to define contents of individual single page for job-opening & job-application.

//*Definitions for Job Application Single*//
[aw2.template applicant_details]
[aw2.set_array template.settings name='Personal Info' /]
[aw2.set_array template.settings.fields.applicant_name name='Applicant Name' meta=yes/]
[aw2.set_array template.settings.fields.applicant_email name='Applicant Email' meta=yes /]

[aw2.return template.settings /]
[/aw2.template]

[aw2.template application_details]
[aw2.set_array template.settings name='Application Details' /]
[aw2.set_array template.settings.fields.ID name='Application Id' post=yes /]
[aw2.set_array template.settings.fields.position_name='Position Applied For' meta=yes /]
[aw2.set_array template.settings.fields.company='Applied At' meta=yes /]
[aw2.set_array template.settings.fields.application_status name='Application Status' taxonomy=yes /]
[aw2.set_array template.settings.fields.reject_reason name='Application Reject Reason' taxonomy=yes /]

[aw2.return template.settings /]
[/aw2.template]

[aw2.template company_details]
[aw2.set_array template.settings name='Company Details' /]
[aw2.set_array template.settings.fields.nach_sent_date name='Nach Sent Date' meta=yes edit=yes/]
[aw2.set_array template.settings.fields.nach_status name='Nach Status' taxonomy=yes edit=yes/]
[aw2.set_array template.settings.fields.umrn name='UMRN' meta=yes edit=yes/]
[aw2.return template.settings /]
[/aw2.template]

[aw2.template comments]
[aw2.set_array template.settings name='Comments' /]
[aw2.set_array template.settings.fields.comments name='' meta=yes comment=yes/]
[aw2.return template.settings /]
[/aw2.template]

[aw2.template process_job_application]
[aw2.set_array template.settings name='Process Job Application' edit="no"/]
[aw2.return template.settings /]
[/aw2.template]

//*Definitions for Job Opening Single*//
[aw2.template job_details]
[aw2.set_array template.settings name='Job Details' /]
[aw2.set_array template.settings.fields.post_title name='Job Title' post=yes edit="yes" /]
[aw2.set_array template.settings.fields.post_content name='Job Description' post=yes edit="yes" type="trix" /]
[aw2.set_array template.settings.fields.job_department name='Department' taxonomy=yes edit="yes" /]
[aw2.set_array template.settings.fields.job_location name='Location' taxonomy=yes edit="yes" /]
[aw2.set_array template.settings.fields.jobsalary name='Salary' meta=yes edit="yes" /]

[aw2.return template.settings /]
[/aw2.template]

[aw2.template opening_job_applications]
[aw2.set_array template.settings name='Job Applications' /]
[aw2.return template.settings /]
[/aw2.template]

Step 9:
Go to "Apps" menu item under "Awesome Studio" menu to create a new "App".
Call it "Manage Jobs" as title. DO NOT edit any thing else. System takes care of that for you.

Step 10:
We would like to  restrict the access to this App for certain users only. So we add a small Trigger to do this.
Add new "Manage Jobs Triggers"
Title - App Defaults
Set the Taxonomy "When" to "App Settings"

[aw2.register app_option part=start]
{
		"id"           :"app_defaults",
		"title"         :"Default Settings",
		"show_on"  :  { 
		                "key":"options-page",
		                "value":"[aw2.get module.original_slug]_options"
		              },
		"show_names" : true
}
[/aw2.register]

[aw2.register app_option part=field]
{
		"name":"Restrict the access to logged in users?",
		"id"   : "members_only",
		"type":"checkbox",
		"desc"    : "Check this if you want to restrict access of the app only for loggedin users"
}
[/aw2.register]
[aw2.register app_option part=field]
{
		"name":"Login URL for members?",
		"id"   : "login_url",
		"type":"text",
		"desc"    : "Non loggedin users will be redirect to this URL, in case it is blank user will be redirect to wp-login url.",
		"attributes" : {
						"data-conditional-id" : "members_only",
						"data-conditional-value" : "on"
					}   
}
[/aw2.register]
[aw2.register app_option part=field]
{
		"name":"Restrict the access to specific role",
		"id"   : "access_role",
		"type":"select",
		"desc"    : "By selecting a role, you can restirct access to the app only for users of that role and Administrators.",
		"default":"",
		"options_cb":"cmb2_get_user_roles",
		"show_option_none":true
}
[/aw2.register]

Step 11:
Add new "Manage Jobs"  Module for each
Title - custom-layout

<html>
  <head>
    <title>[aw2.get module.slug /]</title>
    <script type='text/javascript' src='https://cdn.getawesomestudio.com/lib/jquery/1.12.4/jquery.min.js'></script>
  
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>  
    <link rel="stylesheet" href="https://cdn.getawesomestudio.com/lib/bootstrap/3.3.6/css/bootstrap.min.css">
    <script type='text/javascript' src='https://cdn.getawesomestudio.com/lib/bootstrap/3.3.6/js/bootstrap.min.js'></script>
    
      <script>          
       jQuery( document ).ready(function( $ ) {          
           $.getScript('[aw2.get url.cdn /]spa/spa.v2.min.js', function() { 
              spa.app.start({          
                   homeurl:'[aw2.get url.home /]',          
                   cdn:'[aw2.get url.cdn /]',
                   path:'[aw2.get app.path /]/'
                      });          
              });           
       });          
       </script>
  
    <link rel='stylesheet' href='[aw2.get url.site /]root/css/default-css'>
    <link rel='stylesheet' href='[aw2.get url.site /]manage-jobs/css/common-css'>
   
  </head>

  <body class="gray-white-bg spa_main">  
    
    <script type=spa/axn axn=core.run_script cdn_css_files='bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' cdn_js_files='moment/moment.min.js,bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js'></script>
    
        <script type=spa/axn axn=core.run_script cdn_css_files='bootstrap-select/1.6.2/css/bootstrap-select.min.css' cdn_js_files='bootstrap-select/1.6.2/js/bootstrap-select.min.js'></script>
    
    
    <template get='[aw2.get app.path /]/' axn=core.set set='settings.path'></template>
  
      <header class="container-fluid ">
        <div class="gap-4"></div>
        [aw2.run modules.top-menu /]
      </header>
      <main>
        <div class="container-fluid  ">
          <div class="container">
            [aw2.run main='modules.{module.slug}']
            <div class="gap-7"></div>    
          </div>
        </div>
      </main>
    
     <script type=spa/axn axn=core.run_script> 
      
       $('.collapsible h3').append("<i class='icon pull-right icon-circle-arrow-top' aria-hidden='true'></i>");
        $('.collapsible').click(function(){
            $(this).siblings("[role=content]").slideToggle().addClass("active-slideup"); 
            $(this).find('.icon').toggleClass("icon-circle-arrow-top icon-circle-arrow-bottom"); 
        })
        
         $('.toggle_blocks').click(function(){
           if ( $(this).hasClass("open") ) {
              $(".collapsible").siblings("[role=content]").slideDown();
              $(".collapsible").find('.icon').addClass("icon-circle-arrow-top").removeClass("icon-circle-arrow-bottom"); 
              $(this).removeClass("open")
           }else{
              $(".collapsible").siblings("[role=content]").slideUp(); 
              $(".collapsible").find('.icon').addClass("icon-circle-arrow-bottom").removeClass("icon-circle-arrow-top "); 
              $(this).addClass("open")
           }
           
        })
      
        $('.selectpicker').selectpicker({
                    iconBase: 'fa',
                  tickIcon: 'fa-check'
               });
        $('.selectpicker').find('.caret').addClass("fa").addClass("fa-angle-down");
          
      </script>
    </body>
</html>

Title - top-menu

[aw2.template main]

  [aw2.cdn load lib='spa-bootstrap' module='form'/]
  [aw2.set module.temp_path="{app.path}" /]
  
  [aw2.set_array module.menu.new label='Job Openings' class='btn-warning' link='{module.temp_path}'/]
  [aw2.set_array module.menu.new label='Job Applications' class='btn-success' link='{module.temp_path}/applications'/]
  
  [aw2.get function.wp_logout_url p1='{url}' set="module.logouturl"/]
  [aw2.set_array module.menu.new	label='Logout' class='btn-primary' link='{module.logouturl}'/]
  
  <div class="text-center topmenu">[aw2.run form.menu menu="{module.menu}" /]</div>  


[/aw2.template]

Title - common-tpl

[aw2.template outer-start]
  [aw2.client less]
  .margin-right{
  margin-right:15px;
  }
  .comment-block p:blank,
  .comment-block p:empty 
  {
    display: none;
  }
  .cursor{
    cursor:pointer;
  }
  body .table-responsive td,
   body .table-responsive th
  {
    padding:10px !important;
  }
  #summary_report_form .form-group{
    margin-left:0px !important;
    margin-right:0px !important;
  }
[/aw2.client]  

  <div class="row">
    <div class="col-xs-12">
      <h2 class="font-bold gray-darker font-size-jumbo text-center">[aw2.get template.title /]</h2>
      [aw2.not_empty template.subtitle]
        <p class="text-center no-margin">[aw2.get template.subtitle /]</p>
      [/aw2.not_empty]
    </div>
    <div class="col-sm-12 no-padding">
      <div class="gap-1"></div>
    </div>   
    <div class="col-md-12 brand-white-bg form-border">
      <div class="gap-3"></div>
[/aw2.template]  
    
[aw2.template outer-end]
      <div class="gap-3"></div>
    </div>	
  </div>
[/aw2.template]

Title - home

[aw2.template main]
  [aw2.run modules.common-tpl.outer-start title="Job Openings" subtitle="" /]
    
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        [aw2.module slug="add-new-content" type="as_job" status="publish" /]
      </div>
    </div>
  </div>  
    
  [aw2.cdn run lib='manage' module='search' settings_post_type='{app.default_modules}' settings_slug='{module.slug}' settings_template='view'/]
  [aw2.run modules.common-tpl.outer-end /]
[/aw2.template]

[aw2.template view]
  [aw2.module include slug='job-openings-app' post_type='content_model' /]
  [aw2.set_array module.view  name='Job Openings' slug='{module.slug}' excel_filename='Job_Openings.xlsx'/]
  
  //****************** columns_list ****************************************//
  [aw2.set module.view.columns_list='sno,job_id,job_title' /]
 
  [aw2.set module.view.user_filters='search,s' /]
  [aw2.set module.view.default_filters='' /]
  [aw2.set module.view.global_actions='search,all,xls' /]
  [aw2.return module.view /]
[/aw2.template]

Title - job-opening

[aw2.template main]
  [aw2.query get_post post_id='{qs.0}' set="module.post_data.post" /]
    
      <h2 class="font-bold gray-darker font-size-jumbo text-center">Job Opening</h2>
     
      <div class="gap-3"></div>
        <div class="row">
		        <div class="col-md-12 brand-white-bg form-border">
		            
                 <div class="gap-3"></div>
                <div class="gap-7 text-right"><a href="javascript:void(0);" class="toggle_blocks">Toggle</a></div>
  
  [aw2.module include slug="group-display" /]               
  [aw2.set module.blocks="job_details,opening_job_applications" /] 
  

  [aw2.set module.editblock="yes" /]
  [aw2.if list="processed,rejected" contains="{module.post_data.post.taxonomy.slugs.application_status.comma}"]  
    [aw2.set module.editblock="no"  /]  
  [/aw2.if]
  
    <div class="row">
        <div class="col-md-12 brand-white-bg form-border form-horizontal">
            <div class="gap-3"></div>
            [aw2.loop module.blocks.comma]
              	<article role="group-details" id="[aw2.get item /]">
              	   	[aw2.run slug='definitions' template="{item}" post_type='content_model' set="module.definitions" /] 
  	    <header class="collapsible"><h3>[aw2.get module.definitions.name /]</h3></header>
      			        <section role="content">
                		  <section role="display">
                        [aw2.run templates.displayblock block="{item}" edit="{module.editblock}"/]
                      </section>
            	        <section role="edit"></section> 
            	        <div class="gap-7"></div>
            	      </section>      
    	          </article>  
            [/aw2.loop]  
        </div>
      </div>
              
               
                <div class="gap-6"></div>    
                  
		        </div>  
        </div>
[/aw2.template]

Title - add-new-content

[aw2.template main]
<form role='task-editor'>
  <input type="hidden" name="post_type" value="[aw2.get module.type /]" />
  <input type="hidden" name="post_status" value="[aw2.get module.status /]" />
  <div class="form-group ">
    <label class="control-label hidden " for="manage_form|post|post_title"></label>
      <input id="manage_form|post|post_title" 
             name="manage_form|post|post_title"
             type="text" 
             placeholder="Title" 
             class="form-control input-md js-title"
             value=""
             required="" />
      <span class="help-block"></span>  
  </div>
  <div class="form-group">
    <input id="post_content" type="hidden" name="manage_form|post|post_content">
    <trix-editor input="post_content"></trix-editor>
  </div>
  <div class="form-group row">
    <div class="col-md-12 text-right">
        <button type="submit" 
                class="btn btn-primary ladda-button js-post-btn" 
                style="width:auto"
                data-style="zoom-in">
            <span class="ladda-label">Post</span>
        </button>
    </div>
  </div>
</form>
  
  <script  type=spa/axn 
           axn='form.ajax'
           bind='submit'
           bind_selector="form[role='task-editor']" 
           route_ajax='[aw2.get module.slug /].save_post' 
           disable_selector='.js-post-btn'></script>        

<script type="spa/axn" axn=core.run_script>
  spa.trix_editor={};
  spa.trix_editor.prerequisites={};
  
  spa.trix_editor.prerequisites.js_files='https://cdn.getawesomestudio.com/lib/trix/0.10.0/trix.js,https://cdn.getawesomestudio.com/lib/ladda/1.0.0/spin.min.js,https://cdn.getawesomestudio.com/lib/ladda/1.0.0/ladda.min.js';
  spa.trix_editor.prerequisites.css_files='https://cdn.getawesomestudio.com/lib/trix/0.10.0/trix.css,https://cdn.getawesomestudio.com/lib/ladda/1.0.0/ladda-themeless.min.css';
  
  spa.trix_editor.init=function(){
  $('input[name=href]').removeAttr('required');
  }

  spa.trix_editor.new_course=function(o){
    var el=o.el;
    var course_data=$.parseJSON(el.text());
   
    
  }
</script>
  <script type="spa/axn" axn='trix_editor.init'></script>
<script type=spa/axn axn=core.run_script  js_files='https://cdn.getawesomestudio.com/lib/bootstrap/3.3.7/js/bootstrap.min.js,https://cdn.getawesomestudio.com/lib/bootstrap-datepicker/js/bootstrap-datepicker.js' css_files='https://cdn.getawesomestudio.com/lib/bootstrap-datepicker/css/datepicker.css'>
    $('#datepicker').datepicker();
</script>
[/aw2.template]

[aw2.template save_post]
  [aw2.save_form tag='manage_form' set_post_id='module.task_id']
  {
    "post_type":" [aw2.get request.post_type /] ",
    "post_status":" [aw2.get request.post_status /] "
  }
  [/aw2.save_form]
  
  <script type=spa/axn axn='core.redirect' url='' alert='Data added. Reload page.'></script>
  
[/aw2.template]

Title - openings-job-applications

[aw2.set applications="" /]
[aw2.set_array applications.query_builder posts_per_page=50 post_type=job_application post_status=publish order=DESC orderby=ID /]
[aw2.set_array applications.query_builder.meta_query.new key="job_id" value='{module.post_id}' /]

[aw2.query wp_query args='applications.query_builder' set=module.applications /]
  
[aw2.do cond="{module.applications.found_posts}" greater_than="0"]
  <table class="table table-condensed table-hover table-striped table-reflow font-size-smallest" role="table" id="results_table">
    <thead>
      <tr>
        <th>SNo</th>
        <th>Date</th>
        <th>Application ID</th>
        <th>Applicant Details</th>
        <th>Job Application Status</th>
      </tr>
    </thead>
    <tbody>
      [aw2.loop module.applications.posts]
      	<tr>
          <td>[aw2.get loop.index /]</td>
          <td>[aw2.get item.post_date date_format="d F Y"/]</td>
          <td><a href="[aw2.get app.path /]/application/[aw2.get item.ID /]" target="_blank">[aw2.get item.ID /]</a></td>
          <td>
            <div>
              [aw2.if not_empty='{item.meta.applicant_id}']
                <a href="[aw2.get app.path /]/learner/[aw2.get item.meta.applicant_id /]" target="_blank">
                  [aw2.get item.meta.applicant_name /]
                </a>
              [/aw2.if]
              [aw2.else]
                [aw2.get item.meta.applicant_name not_empty='{item.meta.applicant_name}'/]
              [/aw2.else]
            </div>
            <div>[aw2.get item.meta.applicant_email not_empty='{item.meta.applicant_email}'/]</div>
          </td>
          <td>[aw2.get item.taxonomy.names.application_status.comma /]</td>
        </tr>
      [/aw2.loop]
    </tbody>
  </table>
[/aw2.do]
[aw2.do cond="{module.applications.found_posts}" equal="0"]
  No Job Applications.
[/aw2.do]

Title - common-css

[aw2.client minify_less]
  .topmenu {
    a.btn{
      border-radius: 0;
    }
    button.btn {
      height: 33.5px;
      border-radius: 0;
    }
  }
  [role="search-form"]{
    margin: 0;
  }
  [role="global-actions"]{
    button{
      border-radius: 0;
      margin-right: 5px;
    }
  }
  [role="pagination"]{
    margin: 10px 0;
  }
  [role="group-details"]
  {
    header{
      padding-bottom:20px;
      h3{
          border-bottom:3px solid #eee;
      }
    }
    label{
     
      text-align:right;
  
      @media(max-width:768px)
      {
        
        text-align:left;
        
      }
    }
    [role="display"]{
      .form-group{
        margin-bottom: 0px;
        clear:both;
        @media(max-width:768px)
        {
          padding-bottom:15px;
        }
         input[type="text"],select{
          max-width:300px;
          width:100%;
          border:1px solid #d1c7ac;
          padding:0px 5px;
          height:30px;
        }
      }
    }
  }
  .collapsible{
    cursor: pointer;
  }
  #search-block,#summary_report_form{
    .col-md-4{min-height:80px;}
  }
  td .border-bottom{
    border-bottom: 2px solid #ccc;
    padding:5px 0px;
  }
  td .border-bottom:last-child {
   border-bottom: 0px solid #ccc;
  }
  
  	#uploader_dropbox .plupload_file_rename{
		height:auto;
		line-height:100%;
		width:100%;
	}
	.filerow
  {
	  font-size:12px;
    border-bottom:1px solid #ccc;
    position: relative;
    padding:5px;
  }
  
  .filerow .filenamefield{
      position: absolute;
      top: 6px;
      width: 100%;
      display:none;
      background:#fff;
      
    }
	
  .filerow .removefile{
      padding:0px 15px;
  }
  #filelist{
    position: relative;
  }
  .fileuploadblock
  {
    position: relative;
  }

  .fileuploadblock .errorpopup{
     position: absolute;
     top:50%;
     left:50%;
     width:250px;
     z-index:9;
     margin-left:-125px;
     margin-top:-35px;
     background:#fff;
     text-align:center;
     padding:20px 0px;
     display:none;
  }
    
  .fileuploadblock .percentblock {
    padding:0px 15px;
    display:inline-block;
  }
  .fileuploadblock .Exists{
    font-weight:bold;
    background: orange;
    padding: 0px 5px;
  }
  .fileuploadblock.nointernet .errorpopup{
      display:block;
   }
  .fileuploadblock.nointernet::before {
    content: "";
     position: absolute;
     top:0;
     left:0;
     right:0;
     bottom:0;
     background:rgba(0,0,0,.5);
     z-index:8;
  }
  .filehandler_controls{
    display:none;
  }
 
[/aw2.client]

Title - group-display

[aw2.template get-post-data]
	[aw2.switch]
		[aw2.case cond="{item.meta}" equal="yes"]
		  [aw2.if cond="{item.date_format}" not_equal=""]
        [aw2.get module.post_data.post.meta.{loop.key} date_format="{item.date_format}" /]
      [/aw2.if]
      [aw2.or cond="{item.post_relation}" equal="yes"]
        [aw2.get module.post_data.post.meta.{loop.key} set="module.post_id" /]
        [aw2.do not_empty="{item.section}"]
          <a href="[aw2.get app.path /]/[aw2.get item.section /]/[aw2.get module.post_id /]" target="_blank">
            [aw2.get function.get_the_title p1="{module.post_id}" /]
          </a>
        [/aw2.do]
        [aw2.do empty="{item.section}"]
          [aw2.get function.get_the_title p1="{module.post_id}" /]
        [/aw2.do]
      [/aw2.or]
      [aw2.else]
        [aw2.get module.post_data.post.meta.{loop.key} /]
      [/aw2.else]
		[/aw2.case]
		
		[aw2.case cond="{item.post}" equal="yes"]
			[aw2.get module.post_data.post.{loop.key} /]
		[/aw2.case]
		
		[aw2.case_else]
			[aw2.get module.post_data.post.taxonomy.names.{loop.key}.comma /]
		[/aw2.case_else]
	[/aw2.switch]
[/aw2.template]

[aw2.template displayblock]
	  [aw2.run slug='definitions' template="{template.block}" post_type='content_model' set="module.definitions" /] 
  [aw2.switch]
  
  [aw2.case cond='{template.block}' equal='comments']
      [aw2.module slug="comments" post_id="{module.post_data.post.ID}" /]
    [/aw2.case]
  
    [aw2.case cond='{template.block}' equal='process_job_application']
      [aw2.module slug="process-application" post_id="{module.post_data.post.ID}" /]
    [/aw2.case]
    
    [aw2.case cond='{template.block}' equal='opening_job_applications']
      [aw2.module slug="openings-job-applications" post_id="{module.post_data.post.ID}" /]
    [/aw2.case]
    
    [aw2.case_else]
      [aw2.loop module.definitions.fields]
				<div class="form-group">
				  <label class="col-md-4">[aw2.not_empty item.name] [aw2.get item.name /]: [/aw2.not_empty]</label>
				  <div class="col-md-8">
					[aw2.run templates.get-post-data /]
				  </div>
				</div>
			[/aw2.loop]
      [aw2.do cond="{template.edit}" not_equal="no" ]
        [aw2.if cond="{module.definitions.edit}" not_equal="no"]
			  	<div class="text-right">
			  	  <button bind="click" axn="control.update" control="parents.group-details.sections.edit" route_ajax="group-edit/[aw2.get template.block /]/[aw2.get  module.post_data.post.ID /]" class="btn btn-xs btn-success">EDIT</button>
			  	</div>
  	    [/aw2.if]
  	  [/aw2.do]
    [/aw2.case_else]
    
  [/aw2.switch]		  	
[/aw2.template] 

[aw2.true ajax]
  [aw2.set module.definition="{qs.0}" /]
  [aw2.set module.post_id="{qs.1}" /]
  [aw2.query get_post post_id="{module.post_id}" set="module.post_data.post" /]
  [aw2.run templates.displayblock block="{module.definition}"/]
[/aw2.true]  

Title - group-edit

[aw2.set module.definition="{qs.0}" /]
[aw2.set module.post_id="{qs.1}" /]

//**** customerquery ************//
[aw2.template customerquery]
  [aw2.query get_post post_id="{module.post_id}" set="module.post_data" /]
[/aw2.template] 

//*** optionlist ****//
[aw2.template optionlist]
  <option value="">Select [aw2.get item.name /]</option>
  [aw2.loop module.taxonomy_list] 
    <option value="[aw2.get item.slug /]" [aw2.if cond="{item.slug}" equal="{module.current_taxonomy}"]selected[/aw2.if]>[aw2.get item.name /]</option>
  [/aw2.loop]  

[/aw2.template]

//***** postfield ******//
[aw2.template postfield]
  [aw2.do cond="{item.edit}" equal="yes"]
    <input type="text" name="manage_app|post|[aw2.get loop.key /]" value="[aw2.get module.post_data.{loop.key} /]" />
  [/aw2.do]
  [aw2.do cond="{item.edit}" not_equal="yes"]
     [aw2.get module.post_data.{loop.key} /]
  [/aw2.do] 
[/aw2.template]

//***** metafield ******//
[aw2.template metafield]
  
  [aw2.do cond="{item.edit}" equal="yes"]
  
    [aw2.switch]
      
      [aw2.case cond='{item.type}' equal='select']
        [aw2.get module.post_data.meta.{loop.key} set="module.pervious_value"/]
        [aw2.get function.get_field_object p1="{item.field}" set="module.select_obj"/]
        <select name="manage_app|meta|[aw2.get loop.key /]">
          <option value="">Select [aw2.get item.name /]</option>
          [aw2.loop module.select_obj.choices]
            <option value="[aw2.get loop.key /]" [aw2.if cond="{loop.key}" equal="{module.pervious_value}"] selected [/aw2.if] >[aw2.get loop.item /]</option>
          [/aw2.loop]  
        </select>                                
      [/aw2.case]
      
      [aw2.case cond='{item.comment}' equal='yes']
        <textarea name="[aw2.get loop.key /]"></textarea>
      [/aw2.case]
      
      [aw2.case cond='{item.type}' equal='assign']
        [aw2.get token set='selectid' /]

        [aw2.set posts_data="" /]
        [aw2.set_array posts_data.query_builder posts_per_page="-1" post_type="{{aw2.get item.post_type}}" post_status=publish order=DESC orderby=ID /]
        [aw2.query wp_query args='posts_data.query_builder' set=module.posts_data /]
          
        <input type="hidden" name="manage_app|meta|[aw2.get loop.key /]" value="[aw2.get module.post_data.meta.{loop.key} /]" class="post_id">
        <div class="row" id="[aw2.get selectid /]">
          <div class="col-xs-5">
            <select name="from[]" id="[aw2.get selectid /]_multiselect" class="multiselect form-control list-group" size="3">
              [aw2.loop module.posts_data.posts]
                <option class="list-group-item" value="[aw2.get item.ID /]">[aw2.get item.ID /]-[aw2.get item.post_title /]</option>
              [/aw2.loop]
            </select>
          </div>
          <div class="col-xs-2">
            <button type="button" id="[aw2.get selectid /]_multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
            <button type="button" id="[aw2.get selectid /]_multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
          </div>
          <div class="col-xs-5">
            <select name="to[]" id="[aw2.get selectid /]_multiselect_to" class="multiselect_to form-control list-group" size="4"></select>
          </div>
      </div>
        
        <script type="spa/axn" axn="core.run_script" js_files="https://cdnjs.cloudflare.com/ajax/libs/multiselect/2.2.9/js/multiselect.js">
          var post_id = $('.post_id').val();
    			var parentblock=$("#[aw2.get selectid /]").parent();
          $('#[aw2.get selectid /]_multiselect').multiselect({
            right: '#[aw2.get selectid /]_multiselect_to',
            rightSelected: '#[aw2.get selectid /]_js_right_Selected_1',
            leftSelected: '#[aw2.get selectid /]_js_left_Selected_1',
            search: {
              left: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
            },
        		beforeMoveToRight: function($left, $right, $options) {
        			if($right[0].childElementCount >= 1 || $options.length > 1){
        				alert('You can select only 1 value');
        				return false;
        			}else{
        				return true;
        			}
        		},
        		afterMoveToRight: function($left, $right, $options) {
              parentblock.find('.post_id').val($right[0].firstChild.value);
        		},
        		afterMoveToLeft: function($left, $right, $options) {
              parentblock.find('.post_id').val(post_id);
        		}
        	});
        </script>                              
      [/aw2.case]
      
      [aw2.case cond='{item.type}' equal='radio']
        <div class="group">
          [aw2.get item.options explode="," set="module.options"/]
          [aw2.get loop.key set="module.key"/]
          [aw2.get module.post_data.meta.{loop.key} set="module.oldvalue" /]  
        [aw2.loop module.options]
           <label class="checkbox-inline">
          <input value="[aw2.get item/]" name="manage_app|meta|[aw2.get module.key/]" type="checkbox" axn='customapi.checkboxfix' bind=change [aw2.if cond="{item}" equal="{module.oldvalue}"]checked[/aw2.if]> [aw2.get item/]
        </label>
        [/aw2.loop]    
        </div>
      [/aw2.case] 
      
      [aw2.case cond='{item.type}' equal='date']
        [aw2.get token set='pickerid' /]
        [aw2.get module.post_data.meta.{loop.key} date_format="d-m-Y" set="module.temp_date"/]
         <input type="hidden" name="manage_app|meta|[aw2.get loop.key /]" value="[aw2.get module.post_data.meta.{loop.key} /]" class="datevalue">
         <div class="input-group" id="[aw2.get pickerid /]" style="max-width: 300px;">
      <input type="text" name="date" value="[aw2.get module.temp_date /]" class="form-control date-input" autocomplete="off" required>
           <span class="input-group-addon">
              <span class="icon icon-calendar"></span>
          </span>
        </div>
    <script type=spa/axn axn=core.run_script>    
         $("#[aw2.get pickerid /]").datetimepicker({
            format: " [aw2.get item.time default='DD-MM-YYYY' /] ",
          }).on("dp.change", function (e) {
            if(e.date){
              var parentblock=$("#[aw2.get pickerid /]").parent();
              parentblock.find(".datevalue").val(e.date.format('YYYY-MM-DD H:mm'));
              $(".date-input").blur();
            }else{
              parentblock.find(".datevalue").val("");
            }
      });
      </script>  
        
      [/aw2.case] 
      
      [aw2.case_else]
        
        [aw2.set module.capital] 
          [aw2.if cond="{item.capital}" equal="yes"]
            onkeyup="this.value = this.value.toUpperCase();" 
          [/aw2.if]  
        [/aw2.set]
        
        <input type="text" name="manage_app|meta|[aw2.get loop.key /]" value="[aw2.get module.post_data.meta.{loop.key} /]" [aw2.get module.capital /]>
      [/aw2.case_else]
      
  [/aw2.switch]
  
  [/aw2.do]
    [aw2.do cond="{item.edit}" not_equal="yes"]
       [aw2.if cond="{item.meta}" equal="yes"]
          [aw2.get module.post_data.meta.{loop.key} /]
        [/aw2.if]
        [aw2.else]
           [aw2.get module.post_data.taxonomy.names.{loop.key}.comma /]
        [/aw2.else]
    [/aw2.do] 
  
[/aw2.template]  

    [aw2.run templates.customerquery /]

[aw2.run slug='definitions' template="{module.definition}" post_type='content_model' set=module.definitions/]   

<div class="brand-success-bg">

  <h5 class="pad-3">EDIT: [aw2.get module.definitions.name /] </h5>
  <form id="[aw2.get module.definition /]_form">
    [aw2.loop module.definitions.fields]
      <div class="form-group">
        <label class="col-md-4">[aw2.not_empty item.name] [aw2.get item.name /]: [/aw2.not_empty]</label>
        <div class="col-md-8">
          [aw2.switch]
          	[aw2.case cond="{item.meta}" equal="yes"]
          		[aw2.run templates.metafield /]
          	[/aw2.case]
          	
          	[aw2.case cond="{item.post}" equal="yes"]
          		[aw2.run templates.postfield /]
          	[/aw2.case]
          	
          	[aw2.case_else]
          	   [aw2.query get_terms taxonomies="{loop.key}" set="module.taxonomy_list" hide_empty=0][/aw2.query]
          	  
          		[aw2.do cond="{item.edit}" equal="yes"]    
          		[aw2.get module.post_data.taxonomy.slugs.{loop.key}.comma set="module.current_taxonomy"/]
          		<select name="manage_app|taxonomy|[aw2.get loop.key /]"> 
          		  [aw2.run templates.optionlist /]
          		</select>  
          		[/aw2.do]
          		[aw2.do cond="{item.edit}" not_equal="yes"]
          		   [aw2.get module.post_data.taxonomy.names.{loop.key}.comma /]
          		[/aw2.do]  
          	[/aw2.case_else]
          	
          [/aw2.switch]
        </div>
      </div>
    [/aw2.loop]  
    <div class="form-group">
      <label class="col-md-4">  </label>
      <div class="col-md-8">
       <button type="submit" name="singlebutton" class="btn btn-primary js-submit-job btn-sm">Update</button>
       <button type="button" name="closeblock" class="btn btn-primary js-closeblock btn-sm" >Close</button>
       </div>
    </div>
  </form>
   <div class="gap-2"></div>
   
  <script type=spa/axn axn='form.ajax' bind='submit' bind_selector='#[aw2.get module.definition/]_form' route_ajax='group-submit' disable_selector='.js-submit-job' post_id="[aw2.get module.post_id /]" definition="[aw2.get module.definition /]"></script>
  
  <script type=spa/axn axn='core.run_script' bind='click' bind_selector='.js-closeblock' >
    o.block.trigger.parents('[role=edit]').empty();
  </script>
  
</div>

Title - group-submit

[aw2.save_form tag='manage_app']
{
	"ID":"[aw2.get request.post_id /]"
}
[/aw2.save_form]

 <script type=spa/axn axn=control.update control='trigger.parents.group-details.sections.display' route_ajax='group-display/[aw2.get request.definition /]/[aw2.get request.post_id /]'>
 </script>
  <script type=spa/axn axn=control.empty control='trigger.parents.group-details.sections.edit'>
 </script>

Title - applications

[aw2.template main]
  [aw2.run modules.common-tpl.outer-start title="Job Applications" subtitle="" /]
  [aw2.cdn run lib='manage' module='search' settings_post_type='{app.default_modules}' settings_slug='{module.slug}' settings_template='view'/]
  [aw2.run modules.common-tpl.outer-end /]
[/aw2.template]

[aw2.template view]
  [aw2.module include slug='job-applications-app' post_type='content_model' /]
  [aw2.set_array module.view  name='Job Applications' slug='{module.slug}' excel_filename='Job_Applications.xlsx'/]
  
  //****************** columns_list ****************************************//
  [aw2.set module.view.columns_list='sno,date,application_id,job_title,applicant_details,application_status' /]
 
  [aw2.set module.view.user_filters='search,application_status' /]
  [aw2.set module.view.default_filters='' /]
  [aw2.set module.view.global_actions='search,all,xls' /]
  [aw2.return module.view /]
[/aw2.template]

Title - application

[aw2.template main]
  [aw2.query get_post post_id='{qs.0}' set="module.post_data.post" /]
    
      <h2 class="font-bold gray-darker font-size-jumbo text-center">Application Details</h2>
     
      <div class="gap-3"></div>
        <div class="row">
		        <div class="col-md-12 brand-white-bg form-border">
		            
                 <div class="gap-3"></div>
                <div class="gap-7 text-right"><a href="javascript:void(0);" class="toggle_blocks">Toggle</a></div>
  
  [aw2.module include slug="group-display" /]               
  [aw2.set module.blocks="applicant_details,application_details,process_job_application,comments" /] 
  

  [aw2.set module.editblock="no" /]
  [aw2.if list="processed,rejected" contains="{module.post_data.post.taxonomy.slugs.application_status.comma}"]  
    [aw2.set module.editblock="no"  /]  
  [/aw2.if]
  
    <div class="row">
        <div class="col-md-12 brand-white-bg form-border form-horizontal">
            <div class="gap-3"></div>
            [aw2.loop module.blocks.comma]
              	<article role="group-details" id="[aw2.get item /]">
              	   	[aw2.run slug='definitions' template="{item}" post_type='content_model' set="module.definitions" /] 
  	    <header class="collapsible"><h3>[aw2.get module.definitions.name /]</h3></header>
      			        <section role="content">
                		  <section role="display">
                        [aw2.run templates.displayblock block="{item}" edit="{module.editblock}"/]
                      </section>
            	        <section role="edit"></section> 
            	        <div class="gap-7"></div>
            	      </section>      
    	          </article>  
            [/aw2.loop]  
        </div>
      </div>
              
               
                <div class="gap-6"></div>    
                  
		        </div>  
        </div>
[/aw2.template]

Title - process-application

[aw2.template main]
  [aw2.query get_post post_id="{module.post_id}" set="module.application" /]
  
  [aw2.query get_term_by field="slug" value="{module.application.taxonomy.slugs.application_status.comma}" taxonomy="application_status" set="module.app_status_data" /]  
  [aw2.query get_term_meta term_id="{module.app_status_data.term_id}" key="process_order" set="module.process_order"/]	

  
  <ul class="list-inline">
   [aw2.if cond="{module.process_order}" less_than="90"]
     <li>
       [aw2.run templates.status_list /]
      </li>  
      <li>
        [aw2.query get_terms taxonomies="reject_reason" set="module.reasons" hide_empty=0][/aw2.query]
        <select name="reasons" id="reasons" class="reject_app" style="bottom: -2px;position: relative;height: 30px;max-width:280px;" route_ajax='[aw2.get module.slug/].reject-app' axn='route.run' post_id='[aw2.get module.post_id /]' bind=change>
          <option value="">Select Reject Application Reason</option>
          [aw2.loop module.reasons]
            <option value="[aw2.get item.slug /]">
              [aw2.get item.name /]
            </option>              
          [/aw2.loop]
        </select>
      </li> 
    [/aw2.if]
  </ul>
[/aw2.template]

 [aw2.template status_list]
   [aw2.query get_terms taxonomies="application_status" set="module.taxonomy_list" hide_empty=0 parent=0 orderby="term_id"][/aw2.query]
      [aw2.get module.application.taxonomy.slugs.application_status.comma set="module.current_taxonomy"/]
  		<select name="app_status" id="app_status" style="bottom: -2px;position: relative;height: 30px;max-width:280px;" required route_ajax='[aw2.get module.slug/].change-status' axn='route.run' post_id='[aw2.get module.application.ID /]' bind=change confirmation="Are You sure, You want to change application Status"> 
  		<option value="-1">Select Status</option>
  			[aw2.loop module.taxonomy_list] 
  			  [aw2.if list="rejected" not_contains="{item.slug}" ]
  			  <option value="[aw2.get item.slug /]" [aw2.do cond="{item.slug}" equal="{module.current_taxonomy}"]selected[/aw2.do]>[aw2.get item.name /]</option>
					[aw2.get function.custom_taxonomy_tree_walker p1="application_status" p2="{item.term_id}" /]
    
  			  [/aw2.if]
  			[/aw2.loop]  
  		</select>  
[/aw2.template]  

//***************** change-status **************************************//
[aw2.template change-status]
  [aw2.if cond="{request.app_status}" not_equal="-1"]
  [aw2.set module.post_id="{request.post_id}" /]
    
  [aw2.query set_post_terms post_id="{module.post_id}" taxonomy='application_status' slugs='{request.app_status}' /]
  
  //*ToDo: Send out Notifications based on the Status*//
  
  [mail.send to='{module.applicant_email}'  mail_slug='job-application-{request.app_status}' app_id='{module.app_id}' email='{module.applicant_email}' /]
  
  <script type=spa/axn axn='core.redirect' url='' confirmation="Status Updated Successfully!"></script>
  [/aw2.if]
  [aw2.else]
    <script type=spa/axn axn='core.run_script' confirmation="Status Not Selected!"></script>
  [/aw2.else]  
[/aw2.template]  

//***************** reject-app *****************************************// 
[aw2.template reject-app]	

    [aw2.query set_post_terms post_id="{request.post_id}" taxonomy='application_status' slugs='rejected' /]
    [aw2.query set_post_terms post_id="{request.post_id}" taxonomy='reject_reason' slugs='{request.reasons}' /]  
    [aw2.query get_post_meta post_id="{request.post_id}" key='applicant_email' set="module.applicant_email" /]
    [aw2.get request.post_id set="module.app_id" /]    
  
    <script type=spa/axn axn='core.redirect' url='' confirmation='Job Application Rejected, Please click OK to reload page.'></script>  
   
[/aw2.template]

Title - comments

[aw2.part default]
[aw2.set module.unique_class='{token}' /]
[aw2.client style]
  .media:first-child{
    margin-bottom:15px;
  }
[/aw2.client]  
<article role='feedbacks' id="comments-[aw2.get module.post_id /]" >
  [aw2.query get_comments set=module.comments]
    {
      "post_id":"[aw2.get module.post_id /]"
    }
  [/aw2.query]
  [aw2.loop module.comments]
    <section role='feedback' class='row'>
      <div class='col-xs-12'>
        <div class='media'>
          <div class='media-left'>
             [aw2.set_array user_args size='36' /]
             [aw2.get function.get_avatar_url p1='{{aw2.get item.comment_author_email}}' p2='{user_args}' set='module.user_avatar' /]
            <img src='[aw2.get module.user_avatar /]' class="img-circle media-object"  style="width: 36px; height: 36px;">
          </div>
          <div class='media-body'>
            <h6 class='media-heading'>[aw2.get item.comment_author /] <small>[aw2.get function.human_time_diff p1="{{aw2.get item.comment_date date_format='U'}}" /] ago</small></h6>
            [aw2.get item.comment_content.the_content /]
          </div>
        </div>
      </div>
    </section>
    <div class='gap-5'></div>
  [/aw2.loop] 
  [aw2.do empty='{module.comments}']
    <p>Be the first to leave a comment...</p>
  [/aw2.do]  
  <section role='status'></section>
</article>

<section role='feedback-form' >
  <h5>Your comments?</h5>
  <form  class="[aw2.get module.unique_class /] js-comment-form">
    <div class="form-group">
      <input id="post_content_[aw2.get module.unique_class /]" type="hidden" name="activity_feedback">
      <trix-editor input="post_content_[aw2.get module.unique_class /]"></trix-editor>
      <div class="help-block"></div>
    </div>
    <div class="text-right">
        <button type="submit" name="posts" 
                class="btn btn-primary [aw2.get module.unique_class /] post_blogs" 
                style="width:auto" >    
                <span class="ladda-label">Submit</span>
        </button>
     </div>
  </form>
  <script  type=spa/axn 
           axn='form.ajax'
           bind='submit'
           bind_selector='.[aw2.get module.unique_class /].js-comment-form' 
           route_ajax='[aw2.get module.slug/]' 
           disable_selector='.[aw2.get module.unique_class /].post_blogs' 
           activity_id='[aw2.get module.post_id]'
           editor='post_content_[aw2.get module.unique_class /]'
           part='save_comments'></script>        
        
  <script type="spa/axn" axn='trix_editor.init' upload_url='[aw2.get app.path]/modules/upload-image'></script>
</section>
[/aw2.part]
[aw2.part save_comments]
   [aw2.query insert_comment
             post_id="{request.activity_id}"
             author_name="{current_user.display_name}"
             author_email="{current_user.user_email}"
             author_url=""
             approved="1"
             set=reply ]
    [aw2.get request.activity_feedback stripslashes_deep=true /]
  [/aw2.query] 
 
<template axn=control.update control='main.articles.comments.articles.feedbacks.sections.status' get='me.html'>
   <p class='bg-success text-center'> Comment added. </p>
</template>
<template axn=control.prepend control='main.articles.comments.articles.feedbacks' get='me.html'>
  <section role='feedback' class='row'>
      <div class='col-xs-12'>
        <div class='media'>
          <div class='media-left'>
             [aw2.set_array user_args size='36' /]
             [aw2.get function.get_avatar_url p1='{{aw2.get current_user.user_email}}' p2='{user_args}' set='module.user_avatar' /]
            <img src='[aw2.get module.user_avatar /]' class="img-circle media-object"  style="width: 36px; height: 36px;">
          </div>
          <div class='media-body'>
            <h6 class='media-heading'>[aw2.get current_user.display_name /] <small>[aw2.get function.human_time_diff p1="{{aw2.get now format='U'}}" /] ago</small></h6>
            [aw2.get request.activity_feedback.the_content /]
          </div>
        </div>
      </div>
    </section>
  <div class='gap-5'></div>
</template>
<script type=spa/axn axn=core.run_script>
  var element = document.querySelector("trix-editor[input=[aw2.get request.editor /]]");
  element.editor.setSelectedRange([0, element.editor.getDocument().getLength()]);
  element.editor.deleteInDirection("backward");
</script>
[/aw2.part]

Step 12:
Install "Notifications" shortcode from "Catalogue" which you will find under "Awesome Studio" menu item.
Add new Notification

Title

job-application-status-updated

Content

<div>

Dear HR Admin,

The status of job application <a href="[aw2.get function.site_url /]/manage-jobs/application/[aw2.get sc.application_id /]">#[aw2.get sc.application_id /]</a> is updated to "[aw2.get sc.application_status /]".

</div>

Subject

Job application #[aw2.get sc.application_id /] updated

et voilà!!!
With this, we come to the end of our tutorial.

Let us head straight to check the output of our efforts. Go to http://<YOUR SITE URL>/manage-jobs and see the wonderful outcome of this tutorial.

If you need any help, feel free to mail me: ANI at WPOETS dot COM

Categories
Most Popular