nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Are there repository hook examples for more complex configuration UI?

Bob Swift

https://developer.atlassian.com/stash/docs/2.3.0/how-tos/repository-hooks.html has some nice examples. Are there any examples that better illustrate how to do more complex soy UI components like select/dropdown lists, checkboxes, and similar that include how to tie it in with java code like the simple text examples provided?

Accepted answers

jpoh

Hi Bob,

for the input field widths, AUI provides 4 preset sizes which you can use by setting the class on the input

short-field (75px)

medium-field (165px)

long-field (500px)

full-width-field (full width of the container element)

https://developer.atlassian.com/display/AUI/Forms#Forms-input(type="text",type="password"),select,textarea

eg in your Soy template you'd put this line inside any of the aui.form.* form elements:

{param extraClasses: 'long-field' /}

or as Charles suggested, you can also add your own class and style that to exactly the width you need. Just be aware that AUI sets the width of the fields to 100% and constrains it by setting the max-width.

All comments

seb

Unfortunately the AUI docs which are linked to are a little sparse on how to call the soy templates which it exports.

Good examples might be the the following plugins which provide form data in Stash pages:

https://bitbucket.org/atlassian/stash-repository-sysinfo-plugin/src/master/src/main/resources/static/repoSysInfo.soy

https://bitbucket.org/atlassian/stash-refchange-settings-plugin/src/master/src/main/resources/static/deletionSettings.soy

https://bitbucket.org/atlassian/stash-git-ops-plugin/src/master/src/main/resources/static/repository-settings-panel.soy

None of these are hook plugins, but the logic is all there to pass information back to your servlet.

Bob Swift

Thank you. I will have a look soon.

Bob Swift

Your links spawned more questions . I tried some trial and error coding without much success. I was able to get a checkbox to work in addition to the text field.

{call widget.aui.form.checkbox}
    {param id: 'xxx' /}
    {param labelHtml: 'XXX' /}
    {param checked: $config and $config.xxx /}
    {param description: 'XXX desc' /}
{/call}

Is there a list of valid widgets and what parameters are valid for each?
Is there widget.aui.form.select and widget.aui.form.radio and what are the parameters?
What is the difference between aui.form.xxx and widget.aui.form.xxx? For instance, I use widget.aui.form.checkbox and aui.form.textField (based on the examples I have found)
What is widget.aui.form.form? I am not sure I noticed a difference when other elements were included in that.
The text field seems to have a size parameter but doesn't have any affect on the size of the input field. How do you set the input field size?
The text field seems to have a description parameter but doesn't have any affect. Is there a way to have a description underneath the input field?

jhinch (Atlassian)

widget.aui.form.xxx are Stash's internal soy templates which are implementations of the AUI spec for how forms should look. aui.form.xxx is a more recent experimental API added into AUI which is an implementation of the same spec. the latter is the prefered option for plugin developers to use as we will be soon removing widget.aui.form.xxx. The parameters between the two sets of templates are different which may be why you aren't seeing the changes. It also may be a caching issue in the browser. In terms of the available parameters your best option currently is to look at the source code.

jpoh

Hi Bob,

for the input field widths, AUI provides 4 preset sizes which you can use by setting the class on the input

short-field (75px)

medium-field (165px)

long-field (500px)

full-width-field (full width of the container element)

https://developer.atlassian.com/display/AUI/Forms#Forms-input(type="text",type="password"),select,textarea

eg in your Soy template you'd put this line inside any of the aui.form.* form elements:

{param extraClasses: 'long-field' /}

Bob Swift

Perfect! I saw that earlier in the AUI info but didn't know how to make that work with the soy template. It worked right away for the aui.form.textarea field. Didn't work for aui.form.textField but changing to use aui.form.input instead work as expected. Thanks again!