Are there repository hook examples for more complex configuration UI?

[Bob Swift (personal)]

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?

[jpoh · Accepted solution]

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.

[Bob Swift (personal)]

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!

[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 (personal)]

Thank you. I will have a look soon.

[Bob Swift (personal)]

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}

1. Is there a list of valid widgets and what parameters are valid for each?
2. Is there widget.aui.form.select and widget.aui.form.radio and what are the parameters?
3. 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)
4. What is widget.aui.form.form? I am not sure I noticed a difference when other elements were included in that.
5. 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?
6. 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.

[Bob Swift (personal)]

Thanks. I think I am starting to understand reading the code you pointed at better. I have looked there before, but now I know that is the reference I should look to. I converted my checkbox to remove the widget, but had to stick with widget.aui.form.form as aui.form.form results in a blank dialog. I still can't get the select to work even if I pretty much copy the example options setting. What is the correct soy syntax for specifying options (a tree of nodes)? This does not work:

{call aui.form.select}
    {param id: 'myselect' /}
    {param size: 1 /}
    {param options: [
        [ text : 'My Option 1', value : '1' ],
        [ text : 'My Option 2', value : '2', selected : true ]
    ]/}
{/call}

[cofarrell]

Hi Bob,

For options you need to quote the key name as well:

{call aui.form.select}
    {param id: 'myselect' /}
    {param size: 1 /}
    {param options: [
        [ 'text' : 'My Option 1', 'value' : '1' ],
        [ 'text' : 'My Option 2', 'value' : '2', 'selected' : true ]
    ]/}
{/call}

From:

https://developers.google.com/closure/templates/docs/concepts

Charles

[Bob Swift (personal)]

Thanks for all the help. Almost there.

1. aui.form.form problem was the need to convert the parameter: contents -> content
2. Charles comment fixed the soy syntax error
3. Using aui.form.fieldGroup helps with labeling and setting descriptions
4. The only remaining problem is the size. The input fields are too small, only about 1/2 the dialog size. Setting size parameter on textField or textarea has no affect.

[cofarrell]

Hi Bob,

If you're using the AUI templates then size should work for textField (but not for textArea by the looks of it). Can you see a 'size' attribute in the generated HTML?

Looking at a text element in Chrome Dev Tools I can see we actually apply a width of 100% and a max-width of 250px, which might be why you're not seeing it actually change. You might want to apply you own class (using 'extraClasses' or style through 'extraAttributes' ) and set the width there.

Cheers,

Charles