Part 2 Webwork with soy, requirejs, backbone js in Jira plugins

[#1]

In the first part we developed a plugin, which lets view and store plugin settings. We created a webwork action, using a soy template.

In this part the edit plugin settings screen will consist of two screens. In the first screen we will set two parameters and In the second screen we will set another two parameters. All parameters will be stored from the second screen.

1. Create backbone model file

Create file src/main/resources/js/webwork-config-model.js:

define('webwork/config/model', [
    'jquery',
    'backbone',
    'underscore'
], function($, Backbone, _) {
    var WebConfigModel = Backbone.Model.extend({
        defaults: {
          parameter1: '',
          parameter2: '',
          parameter3: '',
          parameter4: ''
         }
    });
    return {
              Model: WebConfigModel
    };
})

Add the following line to atlassian-plugin.xml to the web-resource tag:

<resource type="download" name="webwork-config-model.js" location="/js/webwork-config-model.js"/>

 2. Create backbone view file

Create file src/main/resources/js/webwork-config-view.js:

define('webwork/config/view', [
    'jquery',
    'backbone',
    'underscore'
], function($, Backbone, _) {
    "use strict";
  var AppView = Backbone.View.extend({
    events: {
        "click #config-save-button" : "saveConfig",
        "click #next-button" : "nextButton",
        "click #back-button" : "prevButton"

    },
    saveConfig: function(){
        this.model.set("parameter3", $("#parameter3").val());
        this.model.set("parameter4", $("#parameter4").val());
        $("#configJson").val(JSON.stringify(this.model));
    },
    nextButton: function(){
        this.model.set("parameter1", $("#parameter1").val());
        this.model.set("parameter2", $("#parameter2").val());
        var template = webwork.config.page2({configJson:$("#configJson").val(), parameter3:this.model.get('parameter3'), parameter4:this.model.get('parameter4')});
        $("#container").replaceWith(template);
        $("#configJson").val(JSON.stringify(this.model));
    },
    prevButton: function(){
            this.model.set("parameter3", $("#parameter3").val());
            this.model.set("parameter4", $("#parameter4").val());
            var template = webwork.config.page1({configJson:$("#configJson").val(), parameter1:this.model.get('parameter1'), parameter2:this.model.get('parameter2')});
            $("#container").replaceWith(template);
            $("#configJson").val(JSON.stringify(this.model));
        },
    initialize: function(){
          this.render();
    },
    render: function(){
          var template = webwork.config.page1({configJson:$("#configJson").val(), parameter1:this.model.get('parameter1'), parameter2:this.model.get('parameter2')});
          $("#container").replaceWith(template);
    },
    el: '#maincontainer'
  });
  return {
          View: AppView
  };
})

Add the following line to atlassian-plugin.xml to the web-resource tag:

<resource type="download" name="webwork-config-view.js" location="/js/webwork-config-view.js"/>

 3. Create js file to setup backbone model and view

Change the contents of src/main/resources/js/webwork-soy-require-backbone.js file to 

 require([
            'webwork/config/view',
            'webwork/config/model',
            'jquery',
            'backbone',
            'underscore'
        ], function(webworkConfigView, webworkConfigModel, $, Backbone, _) {
        var webworkConfigModel = new webworkConfigModel.Model(JSON.parse($("#configJson").val()));
        var actionsView = new webworkConfigView.View({model : webworkConfigModel});

})

Our js file uses require js. the require directive allows us to execute our js file only when all dependencies (webwork/config/view, webwork/config/model, query, backbone, underscore) are loaded.

4. Add soy configuration in atlassian-plugin.xml

Add these lines to the web-resource tag in the atlassian-plugin.xml file:

<transformation extension="soy">
  <transformer key="soyTransformer"/>
</transformation>
<resource name="success-soy.js" type="download" location="/templates/webwork-config/configwebwork/success.soy"/>

 5. Change success.soy

src/main/resources/templates/webwork-config/configwebwork/success.soy should look like this:

{namespace webwork.config}
/**
 * This template is needed for drawing the formview in telegram webwork config page.
 */
{template .formview}
   {@param configJson: string}
   {webResourceManager_requireResource('ru.matveev.alexey.jira.tutorial.webworkui.webwork-soy-require-backbone:webwork-soy-require-backbone-resources')}
     <html>
     <head>
           <meta charset="utf-8"/>
           <meta name="decorator" content="atl.admin">
           <meta name="admin.active.section" content="admin_plugins_menu/telegram-config-section">
           <meta name="admin.active.tab" content="telegram-general-config-item">
           <title>my page page</title>
      </head>
     <body>
        <div id="maincontainer">
          <div id="container">
                   <input class="text long-field hidden" type="text"
                           id="configJson" name="configJson" placeholder="Json String" value="{$configJson}">
          </div>
        </div>
     </body>
     </html>
{/template}
/**
 * This the first page with parameters in the telegram webwork config page.
 */
{template .page1}
   {@param configJson: string}
   {@param parameter1: string}
   {@param parameter2: string}
    <div id="container">
            <form class="aui">
                <div class="field-group">
                     <label for="parameter1">Parameter 1</label>
                     <input class="text long-field" type="text"
                        id="parameter1" name="parameter1" placeholder="Parameter1 value" value="{$parameter1}">
                     <div class="description">Value of Parameter 1</div>
                 </div>
                 <div class="field-group">
                                      <label for="parameter2">Parameter 2</label>
                                      <input class="text long-field" type="text"
                                         id="parameter2" name="parameter2" placeholder="Parameter2 value" value="{$parameter2}">
                                      <div class="description">Value of Parameter 2</div>
                 </div>
                 <div class="field-group">
                        <input class="text long-field hidden" type="text"
                           id="configJson" name="configJson" placeholder="Json String" value="{$configJson}">
                 </div>
                 <div class="buttons-container">
                     <div class="buttons">
                        <a class="cancel" href="#">Cancel</a>
                        <input class="button submit" type="submit" value="Next" id="next-button">
                     </div>
                 </div>
            </form>
    </div>
{/template}
/**
 * This the second page with parameters in the telegram webwork config page.
 */
{template .page2}
   {@param configJson: string}
   {@param parameter3: string}
   {@param parameter4: string}
    <div id="container">
      <form class="aui" action="ConfigWebwork!save.jspa" method="POST">
                 <div class="field-group">
                                     <label for="parameter1">Parameter 3</label>
                                     <input class="text long-field" type="text"
                                        id="parameter3" name="parameter3" placeholder="Parameter3 value" value="{$parameter3}">
                                     <div class="description">Value of Parameter 3</div>
                                 </div>
                 <div class="field-group">
                                     <label for="parameter4">Parameter 4</label>
                                     <input class="text long-field" type="text"
                                         id="parameter4" name="parameter4" placeholder="Parameter4 value" value="{$parameter4}">
                                     <div class="description">Value of Parameter 4</div>
                 </div>
                 <div class="field-group">
                                     <input class="text long-field hidden" type="text"
                                         id="configJson" name="configJson" placeholder="Json String" value="{$configJson}">
                 </div>
                 <div class="buttons-container">
                     <div class="buttons">
                        <input class="button submit" type="submit" value="Back" id="back-button">
                        <input class="button submit" type="submit" value="Save" id="config-save-button">

                     </div>
                 </div>
       </form>
     </div>

{/template}

 6. Test the application

Go to the plugin folder and run the atlas-run command. After Jira started, open http://localhost:2990/jira/secure/ConfigWebwork.jspa? url. You will see the following screen:

Fill Parameters and push the Next button, you will see the following screen:

You can fill the Parameter 3 and the Parameter 4 fields and push the Save button to save the values or you can go back to the first screen.

That is it. The application works.