+
+
+
+ App bars provide the page heading as well as important actions about the current page.
+ It must be included before the l:main-panel.
+
+ Buttons are created with the jenkins-button CSS class.
+ There are a number of different styles that can be added by adding another class alongside, such as
+ jenkins-button--primary. Styling links as buttons is also supported.
+
Each form should have only one primary button. Most other buttons should just be the default one. + Destructive buttons should be used when something will be deleted or not easily undone. + Generally these should have a confirmation page.
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Copy button
+A small button to copy text into a clipboard
+
+
+
+ + The tag creates a small button that allows users to paste text into the clipboard. + The tag requires two mandatory attributes: +
+-
+
- text - the text to be copied into the clipboard. +
- message - message to be displayed upon the successful copying into the clipboard +
Help button
+
+
+
+ + The tag creates a custom button to get help about a page. + The button should always be in the top right of a page, last in the row of components. + The tag has one mandatory attribute: +
+-
+
- href - the page to navigate to on click +
Checkboxes are simple to use in Jenkins with the jelly tag.
+ +Example parameters:
+-
+
- id (optional) - Sets an id for the input, useful for UI testing, one will be generated for you otherwise. Avoid using in repeatable elements as you will end up with duplicate IDs +
- default (optional) - Can be used to set the default to true, not generally recommended as this won't affect configuration as code users, + only use if you want to set a new default when people configure the plugin. +
- field - The field of the descriptor to bind to, must be of type
boolean
+ - title - The label for the checkbox. +
There are more parameters available but they are generally not needed and should be avoided.
+ +
+
+ -
+
-
+
var(--${color})
+
+
Tips
+-
+
- Use color to draw attention to important parts of your interface +
- Color shouldn't be the only way a piece of information is conveyed, use text or symbols along with it +
- It's best to use colors provided by Jenkins as they will automatically adapt to the user's theme +
+ + Show a heterogeneous list of subitems with different data bindings for radio buttons and checkboxes +
@@ -34,7 +38,9 @@ THE SOFTWARE. Current configuration:
- ${it.configFile.asString()}
+
+
You can add arbitrary additional items to the breadcrumb bar (see above), and associate menus with them.
+ This mechanism is convenient for adding anchors to a large page and provide quick access to the key parts.
+ A very typical place where you want to do this is in the configuration page.
+ There's a f:breadcrumb-config-outline tag specifically for this use case,
+ which parses f:section and use that to build the context menu.
+ See the freestyle job configuration page for an example of using this tag.
+
This is section 1
+This is section 1
++ In Jenkins, you can export arbitrary server-side Java object to JavaScript via a proxy, + then invoke their methods from JavaScript. + In this sample, we call a method on the server to increment a counter. This object is a singleton, + so you'll see the same counter value across all the browsers. +
+ +
+ To expose a method of a Java class to JavaScript proxy, annotate the method with @JavaScriptMethod.
+ For security reasons, only public methods on public classes annotated with this annotation are invokable from browsers:
+
+
+
+
+ Then from Jelly scripts, use st:bind tag to export a Java object into a proxy.
+ The "value" attribute evaluates to a server-side Java object to be exported, and the tag produces a JavaScript expression that creates a proxy.
+
+ In the example below, we are pretending that the JEXL expression evaluates to some instance of Foo.
+
+
+
+ Invoking method
+
+ As you can see above, one can invoke methods on the proxy created by the st:bind tag.
+ The JavaScript method takes the arguments that the Java method takes,
+ then it can optionally take a function as an additional parameter, which is used as a callback method when the return value is available.
+ The callback method receives an Ajax.Response object.
+
+ If the Java method returns an object value (such as int, String, Collection, Object[], JSONObject, etc.),
+ you can use the responseObject() method to evaluate the response into a JavaScript object and use it.
+ If the Java method renders more complex HTTP response (for example by writing directly to StaplerResponse
+ or returning an HttpResponse),
+ JavaScript can use other Ajax.Response methods to access the full HTTP response.
+
+ The method call uses XmlHttpRequest underneath, and it gets eventually routed to the corresponding method call on the exact instance that was exported.
+
Tips
+ +Parameters of the server Java method
+
+ The Java method can define arbitrary number of parameters for JavaScript.
+ Each parameter is converted from JSON to Java via StaplerRequest.bindJSON, so aside from primitive Java data types
+ and typeless JSONObject / JSONArray, you can use Stapler databinding to accept typed structured data.
+
+ After defining the parameters from JavaScript, you can additionally define parameters that are injectable by Stapler,
+ such as StaplerRequest or StaplerResponse.
+
Exporting null
+ +
+ If the value attribute of a <st:bind> tag evaluates to null, then the corresponding
+ JavaScript proxy will be null.
Jenkins consists of a large and complex graph of domain objects (ModelObject), where each node in the graph is a web page and edges are hyperlinks. \ +blurb=
Jenkins consists of a large and complex graph of domain objects (ModelObject), where each node in the graph is a web page and edges are hyperlinks. \
To help users navigate quickly on this graph, Jenkins provides a mechanism to attach context menus to model objects, \
which can be used to hop multiple edges without going through individual hyperlinks.
-blurb.define=
To define a context menu on ModelObject, implement ModelObjectWithContextMenu. \ +blurb.define=
To define a context menu on ModelObject, implement ModelObjectWithContextMenu. \
See the example for how to implement this method.
-blurb.breadcrumb=
Implementing ModelObjectWithContextMenu is sufficient for the core to show the context menu \ +blurb.breadcrumb=
Implementing ModelObjectWithContextMenu is sufficient for the core to show the context menu \
for your model object in the breadcrumb. Hover your mouse over the breadcrumb of this page to see context menu \
associated with this sample. \
\
In addition, implementing \
- ModelObjectWithChildren \
+
+ Notification bar is a component with a JavaScript API, that you can use to show a message that disappears in a few seconds.
+ It is typically used to provide feedback for asynchronous operations.
+ To show a notification bar, use:
+
+ A notification bar will auto-hide itself, but you can programmatically hide it with: For typical notifications, there are several pre-defined option set available as constants that you can use:
+
+
+
+
+
+ There are two components used to indicate progress to the user. Spinner is used
+ to show the user something is happening. Progress animation is used to show something is not complete (such as a log). Shows how to do a complex operation on the server while displaying its progress, before displaying to the user Factors of ${number}: Jenkins Welcome to Jenkins Design Library
+ Design Library makes it easy for developers to build complex and consistent interfaces using Jenkins UI components
+ Topics for modernising your interface Get involved There are a couple of ways to create a dropdown in Jenkins. You can use If you want a simpler
+ Updates the contents of a 'select' control dynamically based on selections of other controls.
+ Jenkins features a range of spacing helper classes to enable you to set the margin and padding for your element. This is done through the You can use position modifiers if you only want to impact one side, for example, jenkins-!-margin-bottom-5 jenkins-!-margin-bottom-4 jenkins-!-margin-bottom-3 jenkins-!-margin-bottom-2 jenkins-!-margin-bottom-1 jenkins-!-margin-bottom-0 jenkins-!-padding-5 Jenkins Symbols are an extensive and consistent collection of icons for use in Jenkins and plugins.
+ Symbols are intended to be used everywhere a traditional icon would be used, such as in the sidebar, in buttons and in tables.
+ Symbols are scalable, support different weights and adapt to the user’s theme.
+ Symbols should be used to help a user recognise what a task does at a glance. This means they should be easily
+ recognisable and relevant to the task, e.g. a padlock for credentials.
+ Don't add symbols to headings, they are distracting, often look out of place and do nothing to help the user. Using symbols in your view is simple. Use the existing icon component and set the src value to the symbol you want, prefixed with "symbol-".
+ It’s possible to add alt text and custom classes to symbols, for example:
+ Sizing of the symbol can be achieved by wrapping it in an element such as Add your symbol to: Reference it with:
+ ArtifactId can be found in your Jenkins Tables are created by adding the
+ Start typing a US state for autocomplete results to appear.
+
+ Textboxes can feature auto-completion items by Stapler finds this method via the naming convention.
+
+ There is a similar control to the autocomplete functionality of 'textbox' called combobox:
+
+ Like many other fields combo-boxes can be updated dynamically based on other field values:
+ CodeMirror can be used to turn ordinary text area into syntax-highlighted content-assistable text area
+ You will want to use
+ Make sure that text is sanitized before displaying
+ it inside of Form field validation can access values of the nearby input controls, which is useful for performing complex context sensitive form validation.
+ The same technique can be also used for auto-completion, populating combobox/listbox, and so on.
+ The example below is a bit contrived, but all the input elements are named 'name' (for city name and state name),
+ and we use
+ To implement this you need to provide a ModelObjectWithChildren \
enables you to show children of your model object in the breadcrumb when you click the \u2018>\u2019 icon that separates \
breadcrumb items.
diff --git a/src/main/resources/io/jenkins/plugins/designlibrary/Notifications/index.jelly b/src/main/resources/io/jenkins/plugins/designlibrary/Notifications/index.jelly
new file mode 100644
index 00000000..79a400df
--- /dev/null
+++ b/src/main/resources/io/jenkins/plugins/designlibrary/Notifications/index.jelly
@@ -0,0 +1,38 @@
+
+
+
+
+ notificationBar.show('message')
+
+
+
+
+ notificationBar.hide()
+
+
+ notificationBar.show(msg, notificationBar.OK)
+
+
+
+
+
+
+
+
+
+
+
+
+ Progressive rendering
+
+
+
+
+
+
+
+
+
+
+
+ Boolean radio
+
+
+
+
+ Design
+
Library
+ dropdownDescriptorSelector to create a fully data-bound form and the option to include a
+ config page for the descriptor by creating a file called config.jelly.
+ select to be rendered you can use the f:select
+ jelly tag and create a doFillFieldNameItems method in the descriptor.
+
+ Java source code:
+
+
+ Dynamic select
+
+ config.jelly:
+
+
+
+ Sample.java:
+
+
+
+
+
+ Spacing override classes
+
+ jenkins-!-margin-* and jenkins-!-padding-* classes. The * is the spacing modifier, it ranges from 0 for no spacing to 5 for maximum spacing.jenkins-!-padding-left-3.Examples
+
+ Using Symbols
+
+
+
+
+
+
+
+
+ span
+ with a class of icon-size where size is one of:
+
+
+
+
+
+
+
+ Custom Symbols
+
+
+ {plugin-root}/src/main/resources/images/symbols
+
+
+ Make sure you replace the placeholder parameters:
+
+
+
+
+ pom.xml for Maven plugins or as shortName in
+ build.gradle for Gradle plugins.
+ .jenkins-table
+ CSS class.
+
+
+
+
+
+ Auto-completion
+
+
+
+
+
+
+
+ config.jelly:
+
+
+
+
+ SimpleCombobox.java:
+
+
+
+
+ Dynamic combobox
+ config.jelly:
+
+
+
+
+ DynamicCombobox.java:
+
+
+
+
+
+ Syntax-highlighted text
+
+
+
+
+
+ f:textarea to pass more CodeMirror configuration if you are doing more
+ than displaying a groovy text editor.
+
+
+
+
+ html-tooltip as this
+ can lead to XSS attacks. Escape or avoid using it on user-controlled data like agent display names or descriptions.
+ See Preventing Cross-Site Scripting in Jelly views.
+ @RelativePath so that the validation of the state name refers to the capital name,
+ and the validation of the city name refers to the state name.
+ doCheckXXX method, where XXX is the name of your field.
+ This should return a FormValidation object.
+
+
+
+
+
+
+
+ &