### Soy Application Header Example Source: https://aui.atlassian.com/aui/9.13/docs/app-header This example demonstrates how to implement the AUI Application Header using a Soy template, including the optional Quicksearch pattern and various navigation content parameters. ```Soy {call aui.page.header} {param skipLinks: [['href': '#main', 'label': 'Skip to main content']] /} {param logo: 'jira' /} {param headerLink: '#' /} {param headerLogoText: 'Jira' /} {param primaryNavContent} * [Navigation item or dropdown trigger](https://example.com/) * [Primary button](https://example.com/) {/param} {param secondaryNavContent} * Search * [Often an icon-only dropdown](https://example.com/) {/param} {/call} ``` -------------------------------- ### JavaScript Examples for AUI Date Picker Controller Source: https://aui.atlassian.com/aui/9.13/docs/date-picker Practical JavaScript examples demonstrating how to use the `reconfigure` and `destroy` methods of the AUI Date Picker controller. ```JavaScript controller.reconfigure({ firstDay: 5 }); ``` ```JavaScript controller.destroy(); ``` -------------------------------- ### Soy Template Examples for AUI Labels Source: https://aui.atlassian.com/aui/9.13/docs/labels These Soy template examples illustrate how to define different types of AUI Labels, showcasing configurations such as unclickable, clickable with a URL, closeable without a URL, and a split label that is both clickable and closeable. ```Soy {call aui.labels.label} {param text: 'unclickableUncloseable' /} {param id: 'unclickable-label' /} {/call} {call aui.labels.label} {param text: 'clickable' /} {param id: 'clickable-label' /} {param url: 'https://example.com/' /} {/call} {call aui.labels.label} {param text: 'closableNoUrl' /} {param id: 'closeable-label-nourl' /} {param isCloseable: true /} {/call} {call aui.labels.label} {param text: 'splitLabel' /} {param id: 'split-label' /} {param url: 'https://example.com/' /} {param isCloseable: true /} {/call} ``` -------------------------------- ### Render AUI Progress Tracker with Soy Source: https://aui.atlassian.com/aui/9.13/docs/progress-tracker Example of rendering an AUI progress tracker using a Soy template, defining multiple steps with text, links, and a current step indicator. ```Soy {call aui.progressTracker.progressTracker} {param steps: [ [ 'text': 'Step 1', 'href': '#step1' ], [ 'text': 'Step 2', 'href': '#step2', 'isCurrent': true ], [ 'text': 'Step 3', 'href': '#step3' ], [ 'text': 'Step 4', 'href': '#step4' ], [ 'text': 'Step 5', 'href': '#step5' ] ] /} {/call} ``` -------------------------------- ### AUI Dialog2 HTML Structure Example Source: https://aui.atlassian.com/aui/9.13/docs/dialog2 Illustrates the basic HTML markup for an AUI Dialog2 component, including the header with a title, the main content area, and the footer containing action buttons and an optional hint. ```HTML # The modal dialog title Content for the modal dialog. Okay Next Close This is a hint. ``` -------------------------------- ### AUI Primary Button HTML Example Source: https://aui.atlassian.com/aui/9.13/docs/buttons This HTML example shows how to create a primary AUI button by adding the `aui-button-primary` class. Primary buttons are typically used for the most important action on a page or within a component. ```html ``` -------------------------------- ### Generate Single AUI Buttons with Soy Source: https://aui.atlassian.com/aui/9.13/docs/buttons Soy template examples for rendering a basic AUI button and a primary-styled AUI button. These snippets show the fundamental usage of the `aui.buttons.button` call with the `text` and `type` parameters. ```Soy {call aui.buttons.button} {param text: 'Button'/} {/call} ``` ```Soy {call aui.buttons.button} {param text: 'Primary Button'/} {param type: 'primary'/} {/call} ``` -------------------------------- ### Basic AUI Dropdown Example Source: https://aui.atlassian.com/aui/9.13/docs/dropdown Demonstrates how to associate a button trigger with an AUI dropdown menu using `aria-controls` and `id`, including multiple sections with link items. ```HTML Atlassian Hacker news Github Chrome Firefox Safari Javascript Fortran Rust ``` -------------------------------- ### AUI Button Accessibility Example with aria-label Source: https://aui.atlassian.com/aui/9.13/docs/buttons HTML example demonstrating the use of `aria-label` for providing descriptive text to screen readers. This is crucial for icon-only buttons or multiple buttons with similar purposes to ensure accessibility for users relying on assistive technologies. ```HTML ``` -------------------------------- ### JavaScript DOM Access for AUI Elements Source: https://aui.atlassian.com/aui/9.13/docs/single-select Examples demonstrating how to access `aui-select` and `aui-option` elements using native JavaScript DOM methods for programmatic manipulation. ```JavaScript document.getElementById("my-aui-select-element"); ``` ```JavaScript document.querySelector('#my-aui-select aui-option[value="my-value"]'); ``` -------------------------------- ### AUI JavaScript Keyboard Shortcut Usage Examples Source: https://aui.atlassian.com/aui/9.13/docs/keyboard-shortcuts Illustrates various ways to define and execute keyboard shortcuts using AUI's `AJS.whenIType` function, including executing custom functions, triggering clicks on elements, navigating to URLs, and moving focus between items. ```JavaScript AJS.whenIType('ze').execute(function () { alert('I have executed.'); }); AJS.whenIType('c').click('#create'); AJS.whenIType('gh').or('gd').goTo('https://example.com/'); AJS.whenIType('n').moveToNextItem('.selector'); AJS.whenIType('p').moveToPrevItem('.selector'); ``` -------------------------------- ### Basic HTML Setup for Evenly Spaced Columns Source: https://aui.atlassian.com/aui/9.13/docs/layout Demonstrates the fundamental HTML structure for creating evenly spaced columns using `aui-group` and `aui-item` elements within the Atlassian UI (AUI) framework. Each `aui-item` acts as a column within the `aui-group` row. ```HTML
Your content here
Your content here
``` -------------------------------- ### Implement Basic AUI Expander with Soy Templates Source: https://aui.atlassian.com/aui/9.13/docs/expander This Soy template example shows how to create a standard AUI expander using the `aui.expander.trigger` and `aui.expander.content` calls. It defines an ID for content and trigger, and uses `replaceText` for dynamic button text, mirroring the HTML functionality within a Soy context. ```Soy {call aui.expander.trigger} {param id: 'replace-text-trigger'/} {param contentId: 'expander-with-replace-text-content'/} {param content: 'Read More'/} {param replaceText: 'Read Less'/} {/call} {call aui.expander.content} {param id: 'expander-with-replace-text-content'/} {param content} What happens when you add a shiny new browser to a stack of already-disagreeing citizens? You’ll inevitably find some bugs. This is the story of how we found a rendering quirk and how the Atlassian frontend team found and refined the fix. The problem The Atlassian User Interface (AUI) library has just finished an IE10 sprint to get our library prepped and ready for the newest member of the browser family. While IE10 seems generally quite good, we found a couple of problems due to IE10 dropping conditional comments; plus some undesirable behaviours {/param} {/call} ``` -------------------------------- ### JavaScript Example: AUI Navigation API Usage Source: https://aui.atlassian.com/aui/9.13/docs/navigation Demonstrates how to initialize an AUI navigation object using a CSS selector and then query its collapsed state using the `isCollapsed()` method. This snippet illustrates basic interaction with the AUI navigation API. ```JavaScript var sidebarNav = AJS.navigation('#sidebar-nav'); sidebarNav.isCollapsed(); ``` -------------------------------- ### AJS.RestfulTable Methods Reference Source: https://aui.atlassian.com/aui/9.13/docs/restful-table API documentation for the core methods available on the `AJS.RestfulTable` object. This section details each method's purpose, required arguments, and the type of value it returns, providing a complete guide for programmatic interaction with the RestfulTable component. ```APIDOC AJS.RestfulTable: addRow: Description: Adds row to collection and renders it Arguments: model: index: Returns: AJS.RestfulTable getColumnCount: Description: Gets the number of columns in the table Arguments: None Returns: Number isEmpty: Description: Returns true if there are no entries in the table Arguments: None Returns: Boolean getModels: Description: Gets backbone collection Arguments: None Returns: Backbone.Collection getTable: Description: Gets jQuery element for Arguments: None Returns: jQuery getTableBody: Description: Gets jQuery element for Arguments: None Returns: jQuery getCreateRow: Description: Gets view used for create row (first row in table) Arguments: None Returns: AJS.RestfulTable.EditRow showNoEntriesMsg: Description: Shows message options.noEntriesMsg to the user if there are no entries Arguments: None Returns: AJS.RestfulTable removeNoEntriesMsg: Description: Removes message options.noEntriesMsg to the user if there ARE entries Arguments: None Returns: AJS.RestfulTable edit: Description: Converts readonly row to editable view Arguments: field: - field name to focus row: AJS.RestfulTable.Row Returns: AJS.RestfulTable.EditRow ``` -------------------------------- ### Structure AUI Buttons and Groups with HTML Source: https://aui.atlassian.com/aui/9.13/docs/buttons Examples of basic AUI button HTML, wrapping multiple buttons into a group using the `aui-buttons` container, and creating split buttons with a main action and a dropdown trigger. These structures define the fundamental layout and interaction patterns for AUI buttons. ```HTML ``` ```HTML
``` ```HTML
``` -------------------------------- ### Generate AUI Link Buttons with Icon and Text using Soy Source: https://aui.atlassian.com/aui/9.13/docs/buttons Soy template example for creating a link-styled AUI button that includes both an icon and text. This configuration is useful for navigation or actions like 'Go back', combining visual cues with descriptive text. ```Soy {call aui.buttons.button} {param text: 'Go back' /} {param iconType: 'aui' /} {param extraClasses: 'aui-button-link-icon-text' /} {param iconClass: 'aui-icon-small aui-iconfont-chevron-left' /} {param iconText: 'Go back' /} {param type: 'link' /} {/call} ``` -------------------------------- ### AUI Date Picker and Calendar Widget Construction API Source: https://aui.atlassian.com/aui/9.13/docs/date-picker Provides the API reference and code examples for instantiating AUI date pickers and calendar widgets. It covers both global constructor and jQuery helper methods, detailing required parameters and the returned controller object. ```APIDOC Construction Methods: - Via global constructor: new AJS.DatePicker(el, options) - Via jQuery helper: AJS.$(el).datePicker(options) - Calendar widget via global constructor: new AJS.CalendarWidget(el, options) - Calendar widget via jQuery helper: AJS.$(el).calendarWidget(options) Parameters: el: HTMLElement (non-null) - The DOM element to attach the date picker/calendar to. options: Object - Configuration options for the date picker/calendar. Return Value: controller: Object - A date picker controller object. Note: Using the jQuery helper avoids re-constructing a date picker for the same element multiple times. ``` ```JavaScript const el = document.querySelector('.my-field'); const options = { /* ... */ }; let controller; // attach a date picker to an HTML input field via global controller = new AJS.DatePicker(el, options); // attach a date picker to an HTML input field via jQuery helper controller = AJS.$(el).datePicker(options); // render a calendar widget in to el via global controller = new AJS.CalendarWidget(el, options); // render a calendar widget in to el via jQuery helper controller = AJS.$(el).calendarWidget(options); ``` -------------------------------- ### Generate AUI Icon Button with Soy Source: https://aui.atlassian.com/aui/9.13/docs/buttons Soy template example for rendering an AUI button that includes an icon and associated text. It illustrates the use of `iconType`, `iconClass`, and `iconText` parameters to embed visual cues within the button. ```Soy {call aui.buttons.button} {param text: ' Icon Button' /} {param iconType: 'aui' /} {param iconClass: 'aui-icon-small aui-iconfont-view' /} {param iconText: 'View' /} {/call} ``` -------------------------------- ### Generate Grouped AUI Buttons with Soy Source: https://aui.atlassian.com/aui/9.13/docs/buttons Soy template example for wrapping multiple AUI buttons within an `aui.buttons.buttons` call to create a button group. This structure ensures proper alignment and spacing for a collection of related buttons. ```Soy {call aui.buttons.buttons} {param content} {call aui.buttons.button}{param text: 'Button'/}{/call} {call aui.buttons.button}{param text: 'Button'/}{/call} {call aui.buttons.button}{param text: 'Button'/}{/call} {/param} {/call} ``` -------------------------------- ### Mock REST API for JIRA Project Versions (JavaScript) Source: https://aui.atlassian.com/aui/9.13/docs/restful-table This JavaScript code sets up a `sinon.fakeServer` to simulate REST API interactions for managing JIRA project versions. It handles GET, PUT, POST, and DELETE requests for version resources, providing mock data and responses to mimic a backend service. ```javascript (function() { var counter = 1; function newId(seed) { return String(seed || '') + counter++; } var savedVersions = [{ id: 10000, status: 'Released', name: 'v1.0', description: 'The first release' }, { id: 10001, status: 'Unreleased', name: 'v1.1', description: 'An improvement on the first release' }]; function getVersion(id) { return savedVersions.find(v => v.id == id); } var server = sinon.fakeServer.create(); server.respondWith("GET", /rest\/project\/(\w+)\/versions/, function(xhr, projectId) { xhr.respond(200, {"Content-Type": "application/json"}, JSON.stringify(savedVersions)); }); server.respondWith("GET", /rest\/version\/(\d+)/, function(xhr, id) { let version = getVersion(id); if (version) { xhr.respond(200, {"Content-Type": "application/json"}, JSON.stringify(version)); } else { xhr.respond(404, {"Content-Type": "application/json"}, '{"errors":["Not found"]}'); } }); server.respondWith("PUT", /rest\/version\/(\d+)/, function(xhr, id) { let version = getVersion(id); if (version) { let newData = JSON.parse(xhr.requestBody); AJS.$.extend(version, newData); xhr.respond(200, {"Content-Type": "application/json"}, JSON.stringify(version)); } else { xhr.respond(404, {"Content-Type": "application/json"}, '{"errors":["Not found"]}'); } }); server.respondWith("DELETE", /rest\/version\/(\d+)/, function(xhr, id) { let version = getVersion(id); if (version) { savedVersions = savedVersions.filter(v => v.id !== id); xhr.respond(200, {"Content-Type": "application/json"}, JSON.stringify(version)); } else { xhr.respond(404, {"Content-Type": "application/json"}, '{"errors":["Not found"]}'); } }); server.respondWith("POST", /rest\/version$/, function(xhr) { var newVersion = JSON.parse(xhr.requestBody); newVersion.id = newId('1100'); savedVersions.push(newVersion); xhr.respond(200, {"Content-Type": "application/json"}, JSON.stringify(newVersion)); }); server.autoRespond = true; server.autoRespondAfter = 300; })(); ``` -------------------------------- ### Manage AUI Toggle Spinners and State with JavaScript Source: https://aui.atlassian.com/aui/9.13/docs/spinner Illustrates how to handle AUI toggle button state changes, display a busy spinner during an asynchronous operation (simulated with a POST request), and revert state on failure. Includes a fake server setup using Sinon.js for testing the asynchronous interaction. ```JavaScript var form = document.getElementById('wifi-toggle-form'); form.addEventListener('change', function(e) { var toggle = document.getElementById('wifi-toggle'); var isChecked = toggle.checked; // new value of the toggle if (isChecked === false) { // do not call server if unchecked console.log("toggle is unchecked"); return; } toggle.busy = true; $.post('set/my/variable', { value: isChecked }) .done(function () { console.log('success'); }) .fail(function () { toggle.checked = !isChecked; console.error('display an error message'); }) .always(function () { toggle.busy = false; }); }); // create fake server response var url = "set/my/variable"; var server = sinon.fakeServer.create(); server.autoRespond = true; server.autoRespondAfter = 2000; server.respondWith('POST', url, [ 200, { 'Content-Type': 'application/json' }, '[{}]']); ``` -------------------------------- ### Generate AUI Dropdown 2 Trigger Button with Soy Source: https://aui.atlassian.com/aui/9.13/docs/buttons Soy template example for creating a link-styled AUI button that acts as a trigger for a Dropdown2 menu. It demonstrates how to link a button to a dropdown target using the `dropdown2Target` parameter. ```Soy {call aui.buttons.button} {param text: 'Dropdown button'/} {param type: 'link'/} {param dropdown2Target: 'dropdown2id'/} {/call} ``` -------------------------------- ### Generate AUI Split Buttons with Soy Source: https://aui.atlassian.com/aui/9.13/docs/buttons Soy template example for creating a split button, combining a main action button with a secondary dropdown trigger. This advanced button type is useful for providing both a primary action and related secondary options. ```Soy {call aui.buttons.buttons} {param content} {call aui.buttons.splitButton} {param splitButtonMain: [ 'text': 'Split main' ] /} {param splitButtonMore: [ 'text': 'Split more', 'dropdown2Target': 'split-container-dropdown' ] /} {/call} {/param} {/call} ``` -------------------------------- ### Render AUI Sidebar with Standard Page Header Source: https://aui.atlassian.com/aui/9.13/docs/sidebar Demonstrates how to use the `aui.sidebar.sidebar` Soy template to create a page layout with a standard header, including an avatar and a main content area for the page title. This setup is suitable for general page layouts. ```Soy {call aui.sidebar.sidebar} {param headerContent} {call aui.page.pageHeader} {param content} {call aui.page.pageHeaderImage} {param content} {call aui.avatar.avatar} {param size: 'large' /} {param isProject: true /} {param avatarImageUrl: 'images/avatar-project.svg' /} {param accessibilityText: 'My awesome project' /} {/call} {/param} {/call} {call aui.page.pageHeaderMain} {param content} # Sidebar page layout 1. Breadcrumbs or subtitle {/param} {/call} {/param} {/call} {/param} {param content} {/param} {param settingsButtonUrl: 'https://example.com' /} {param settingsText: 'Settings' /} {/call} ``` -------------------------------- ### AUI CSS Variables for Help Text and Onboarding Source: https://aui.atlassian.com/aui/9.13/docs/aui-colors Defines AUI CSS variables for styling help text and onboarding messages, specifically controlling the primary color used for these informational elements to guide users. ```APIDOC --aui-help-color: Old light mode: @ak-color-P400 Old dark mode: @ak-color-P300 Design tokens CSS variable: --ds-border-discovery ``` -------------------------------- ### JavaScript Example for AUI Async Dropdown with Fake Server Source: https://aui.atlassian.com/aui/9.13/docs/dropdown This JavaScript code demonstrates how to simulate a remote server response for an AUI asynchronous dropdown using Sinon.js. It sets up a fake server that responds to a specific URL with a predefined JSON structure, showcasing various dropdown item types like sections, links, checkboxes, and radio buttons. ```JavaScript $(function () { // Create fake server response var url = "/async-dropdown"; var server = sinon.fakeServer.create(); server.autoRespond = true; server.autoRespondAfter = 1000; var response = [ { type: "section", label: "Projects", items: [ { type: "link", href: "#aui", content: "AUI" }, { type: "link", href: "#design-platform", content: "Design Platform" }, { type: "link", href: "#adg", content: "ADG" } ]}, { type: "section", label: "Issues", items: [ { type: "link", href: "#aui-111", content: "AUI-111" }, { type: "link", href: "#aui-222", disabled: true, content: "AUI-222" }, { type: "link", href: "#aui-333", hidden: true, content: "AUI-333" } ]}, { type: "section", label: "Checkboxes", items: [ { type: "checkbox", interactive: true, content: "checkbox" }, { type: "checkbox", interactive: true, checked: true, content: "checkbox checked" } ]}, { type: "section", label: "Radio", items: [ { type: "radio", interactive: true, content: "radio" }, { type: "radio", interactive: true, checked: true, content: "radio checked" } ]} ]; server.respondWith(url, [ 200, { 'Content-Type': 'application/json' }, JSON.stringify(response) ]); }); ``` -------------------------------- ### HTML Preformatted Code Block Example Source: https://aui.atlassian.com/aui/9.13/docs/typography This snippet demonstrates the use of the HTML `
` tag for displaying multi-line code or preformatted text. It highlights the importance of proper HTML escaping for content within the block and notes that the `
` tag preserves whitespace.

```HTML


    
Example code snippet

    

        Don't forget to properly HTML escape your content!
        Also, remember that the "pre" tag treats whitespace significantly.
    



```

--------------------------------

### Basic JavaScript Templating with AJS.template

Source: https://aui.atlassian.com/aui/9.13/docs/template

This snippet demonstrates the simplest usage of `AJS.template` to populate a string template with data. It shows how to define a template string, provide data as a JavaScript object, and fill the template. It also highlights the need to call `toString()` on the filled template object to get the final string output.

```JavaScript
var template = AJS.template("Hello, {location}!");
var data = { location: "world" };
console.log(template.fill(data));

// note - toString() is required because fill() returns template object
alert(template.fill(data).toString());
```

--------------------------------

### Create a Basic Sortable HTML Table with AUI

Source: https://aui.atlassian.com/aui/9.13/docs/sortable-table

Demonstrates the minimal HTML structure required to make a table sortable using AUI's `aui` and `aui-table-sortable` CSS classes, along with a defined `
`. This setup enables default sorting behavior for table columns. ```HTML
Header 1 Header 2 Header 3
Data A1 Data B1 Data C1
Data A2 Data B2 Data C2
``` -------------------------------- ### Constructing a Full AUI Page with Soy Templates Source: https://aui.atlassian.com/aui/9.13/docs/page This Soy template demonstrates how to construct a complete AUI page by calling the `aui.page.document` and `aui.page.page` templates. It outlines placeholders for window title, head content, and main page content including header, content, and footer. ```Soy {template .index} {call aui.page.document} {param windowTitle: 'Window title text' /} {param headContent} {/param} {param content} {call aui.page.page} {param headerContent} {/param} {param contentContent} {/param} {param footerContent} {/param} {/call} {/param} {/call} {/template} ``` -------------------------------- ### Add Actions to an AUI Flag Source: https://aui.atlassian.com/aui/9.13/docs/flag This example shows how to include interactive actions within an AUI flag's body. Actions provide users with immediate follow-up options, such as viewing an issue or adding to a sprint. It emphasizes using appropriate HTML elements ( for navigation,