ui-component development - Configuring component properties

[Andrew Grant1]

Hello!

I've been tooling with component development in NodeJS using the SNC cli and ui-component extension.  All very great and learning a lot!  I'm facing an issue recently though: there are many examples of exposing simple (i.e string/text) properties for a component in the context of UI Builder but I'm struggling with implementing a choice list/dropdown as a property using key/values generated from within my component.  Things I've tried:

[Not Ideal: Simply use a string] While it introduces human error-type potential being a free text field, I was able to effectively do what was needed:  affect change within the compiled-and-deployed component from within my PDI by changing the value within that field.  I change the text string to one of four (4) strings, and the interface changes accordingly.  

now-ui.json properties	custom component view	custom properties in UI Builder

[Ideal: Implement a dropdown/choice list] After perusing some documentation and blog posts I tried to implement a dropdown instead.  While I was able to get it to display, the choice list remained empty.  I understand that in many cases choices can be added via references to entries within the sys_choice table but I want these to stand alone.  Preferably set by myself within the boundaries of the component itself as a hard-coded array of key/value pairs for each theme preset.  

now-ui.json properties	custom component view	custom properties in UI Builder

Not even sure this is possible when considering how this is being used.  Guess that's how I found myself here pulling on the shirts of more experienced devs 😉 Thanks in advance for any guidance on this

[Brad Tilton · Accepted solution]

Hi Andrew,

I'm actually working on an article around data resource and component properties that will list all thirteen of the current property types with some configuration info. One of the things that may help is that the property types are shared between components and data resources, and there are a ton of oob data resources you can use as references for the JSON format of those property types. FOr the choice type I think properties in the metaData may need to change to something like:

typeMetadata: {
    "variant": "dropdown",
    "choices": [{ 
        "label":"Your label",
        "value": "yourvalue"
    },
        "label":"Your label",
        "value": "yourvalue"
    }]
}

Other options for the variant are radio-group or button-group and if you don't pass a variant it defaults to dropdown.

Disclaimer: This is based on an internal doc I've been working with but haven't tested this specifically, but hopefully it points you in the right direction. You could also use a JSON property for this so you can bind a JSON client state parameter to it in UIB.

[Andrew Grant1]

Hi Brad,

Thanks!  Made some progress based on your reply:

I look forward to your article around data resource and component properties that will list all current property types with configuration info!

Thanks again,

Andrew

[Brad Tilton]

Here's the article: https://community.servicenow.com/community?id=community_article&sys_id=7a27aba5db4d1510bb4a474d13961...