It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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

In this article we will develop a plugin, which will store plugin settings. These plugin settings will be stored by a webwork. We will use the out of the box Jira plugin UI libraries: soy, requirejs and backbone js.

This article will consist of two parts:

In the first part we will develop a webwork with a soy template. You will be able to view and store plugin settings. You can find the source code here.

In the second part we will add requirejs and backbone js to our plugin. You can find the source code here.

1. Create the plugin.

Open terminal and enter:

atlas-create-jira-plugin

 Answer to the questions like this:

Define value for groupId: : ru.matveev.alexey.jira.tutorial.webworkui
Define value for artifactId: : webwork-soy-require-backbone
Define value for version:  1.0.0-SNAPSHOT: : 
Define value for package:  ru.matveev.alexey.jira.tutorial.webworkui: : 
Y: : Y

 2. Update pom.xml

Change the compile scope for the atlassian-spring-scanner-annotation to provided:

<dependency>
<groupId>com.atlassian.plugin</groupId>
<artifactId>atlassian-spring-scanner-annotation</artifactId>
<version>${atlassian.spring.scanner.version}</version>
<scope>provided</scope>
</dependency>

Remove the  atlassian-spring-scanner-runtime dependency.

You can find more information about atlassian spring scanner here:

https://bitbucket.org/atlassian/atlassian-spring-scanner/src/master/

Set the atlassian.spring.scanner.version property to 2.0.0.

<atlassian.spring.scanner.version>2.0.0</atlassian.spring.scanner.version>

 3. Create service to manage plugin settings

We will create an interface and a class to manage the settings of our plugin. Our plugin will have only one setting, which will be a json string. 

src/main/java/ru/matveev/alexey/jira/tutorial/webworkui/api/PluginSettingService.java

package ru.matveev.alexey.jira.tutorial.webworkui.api;

public interface PluginSettingService {
String getConfigJson();
void setConfigJson(String json);
}

src/main/java/ru/matveev/alexey/jira/tutorial/webworkui/impl/PluginSettingServiceImpl.java

package ru.matveev.alexey.jira.tutorial.webworkui.impl;

import com.atlassian.plugin.spring.scanner.annotation.imports.ComponentImport;
import com.atlassian.sal.api.pluginsettings.PluginSettings;
import com.atlassian.sal.api.pluginsettings.PluginSettingsFactory;
import ru.matveev.alexey.jira.tutorial.webworkui.api.PluginSettingService;

import javax.inject.Inject;
import javax.inject.Named;

@Named
public class PluginSettingServiceImpl implements PluginSettingService {

public final PluginSettings pluginSettings;
private static final String PLUGIN_STORAGE_KEY = "ru.matveev.alexey.jira.tutorial.webworkui.";
private static final String CONFIG_JSON = "configjson";


@Inject
public PluginSettingServiceImpl(@ComponentImport PluginSettingsFactory pluginSettingsFactory) {
this.pluginSettings = pluginSettingsFactory.createGlobalSettings();

}

private void setSettingValue(String settingKey, String settingValue) {
this.pluginSettings.put(PLUGIN_STORAGE_KEY + settingKey, settingValue != null?settingValue:"");
}

private String getSettingValue(String settingKey) {
return pluginSettings.get(PLUGIN_STORAGE_KEY + settingKey) != null?pluginSettings.get(PLUGIN_STORAGE_KEY + settingKey).toString():"";
}

@Override
public String getConfigJson() {
return getSettingValue(CONFIG_JSON);
}

@Override
public void setConfigJson(String json) {
setSettingValue(CONFIG_JSON, json);
}
}

 4. Create webwork to manage plugin settings

Open terminal in the plugin folder and execute:

create-atlas-jira-plugin-module

 Answer the following way to the questions:

Choose a number (1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19/20/21/22/23/24/25/26/27/28/29/30/31/32/33/34): 31
Enter Plugin Module Name My Webwork Module: : Config
Show Advanced Setup? (Y/y/N/n) N: : Y
Module Key config: : webwork-config
Module Description The Config Plugin: : 
i18n Name Key config.name: : 
i18n Description Key config.description: : 
Enter Action Classname MyActionClass: : ConfigWebwork
Enter Package Name ru.matveev.alexey.jira.tutorial.webworkui.jira.webwork: :Enter Alias ConfigWebwork: : 
Enter View Name success: : success.soy
Enter Template Path /templates/webwork-config/configwebwork/success.soy.vm: : /templates/webwork-config/configwebwork/success.soy
Add Another View? (Y/y/N/n) N: : N
Add Another Action? (Y/y/N/n) N: : N
Add Another Plugin Module? (Y/y/N/n) N: : N

Change the contents of the src/main/java/ru/matveev/alexey/jira/tutorial/webworkui/jira/webwork/ConfigWebwork.java file to:

package ru.matveev.alexey.jira.tutorial.webworkui.jira.webwork;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.atlassian.jira.web.action.JiraWebActionSupport;
import ru.matveev.alexey.jira.tutorial.webworkui.api.PluginSettingService;

import javax.inject.Inject;

public class ConfigWebwork extends JiraWebActionSupport
{
private static final Logger log = LoggerFactory.getLogger(ConfigWebwork.class);
private final PluginSettingService pluginSettingService;
private String configJson;

@Inject
public ConfigWebwork(PluginSettingService pluginSettingService) {
this.pluginSettingService = pluginSettingService;
}

@Override
public String execute() throws Exception {
super.execute();
return SUCCESS;
}

public void doSave() {
pluginSettingService.setConfigJson(configJson);
}

@ActionViewData
public String getConfigJson() {
return pluginSettingService.getConfigJson().isEmpty()?"{}":pluginSettingService.getConfigJson();
}

public void setConfigJson(String json) {
this.configJson = json;
}

}

 5. Create web section and web item

 Now we add to the add-on menu a menu section and a menu item. Open terminal in the plugin folder and execute:

create-atlas-jira-plugin-module 

Answer the following way:

Choose a number (1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19/20/21/22/23/24/25/26/27/28/29/30/31/32/33/34): 30
Enter Plugin Module Name My Web Section: : Webwork Config Section
Enter Location (e.g. system.admin/mynewsection): admin_plugins_menu
Show Advanced Setup? (Y/y/N/n) N: : N
Add Another Plugin Module? (Y/y/N/n) N: : Y
Choose a number (1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19/20/21/22/23/24/25/26/27/28/29/30/31/32/33/34): 25
Enter Plugin Module Name My Web Item: : Webwork Config Item
Enter Section (e.g. system.admin/globalsettings): admin_plugins_menu/webwork-config-section 
Enter Link URL (e.g. /secure/CreateIssue!default.jspa): /secure/ConfigWebwork.jspa?        
Show Advanced Setup? (Y/y/N/n) N: : N
Add Another Plugin Module? (Y/y/N/n) N: : N

 6. Create soy template

Now we create a soy template to render the webwork interface. 

src/main/resources/templates/webwork-config/configwebwork/success.soy

{namespace webwork.config}
/**
* This template is needed for drawing the formview.
*/
{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="container">
<form class="aui" action="ConfigWebwork!save.jspa" method="POST">
<div class="field-group">
<label for="configJson">Json</label>
<input class="text long-field" type="text"
id="configJson" name="configJson" placeholder="Json String" value="{$configJson}">
<div class="description">the configJson Parameter</div>
</div>
<div class="buttons-container">
<div class="buttons">
<input class="button submit" type="submit" value="Save" id="config-save-button">
<a class="cancel" href="#">Cancel</a>
</div>
</div>
</form>
</div>
</body>
</html>
{/template}

 In atlassian-plugin.xml change the view tag in the webwork section to:

<view name="success" type="soy">:webwork-soy-require-backbone-resources/webwork.config.formview</view>

In Atlassian-plugin.xml add to the web-resource tag the following line:

<resource type="soy" name="webwork-config" location="/templates/webwork-config/configwebwork/success.soy"/>

6. Run plugin

Open terminal in the plugin folder and execute:

atlas-run

Wait until Jira is started and open in your browser:

http://localhost:2990/jira/secure/ConfigWebwork.jspa

You will see a screen like this:

Untitled 3.pngWe succeeded with the first part of our plugin. Let's go to the second part.

1 comment

[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.0:compile (default-compile) on project webwork-soy-require-backbone: Compilation failure
[ERROR] /C:/Users/Olivera.Tancheva/olivera19/webwork-soy-require-backbone/src/main/java/ru/matveev/alexey/jira/tutorial/webworkui/jira/webwork/ConfigWebwork.java:[31,3] cannot find symbol
[ERROR] symbol:   class ActionViewData
[ERROR] location: class ru.matveev.alexey.jira.tutorial.webworkui.jira.webwork.ConfigWebwork

Comment

Log in or Sign up to comment
TAGS

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you