Skip to content

Examples

Note

The 'Acme' examples mentioned here are deployed with Leap.

Each 'Acme' widget requires the Acme_Widgets.css and Acme_common.js, these files only need to be defined once. 

ibm.nitro.NitroConfig.runtimeResources.1=/custom-widgets/samples/acme/Acme_Widgets.css
ibm.nitro.NitroConfig.runtimeResources.2=/custom-widgets/samples/acme/Acme_common.js

Display Widget Examples

  • Navigation Header 
    ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_PageNavHeader_Widget.js
  • Notification Widget (at github.com)

Data Widget Examples

Yes/No Widget

```    
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_YesNo_Widget.js
```

Boolean Widget

```
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_Boolean_Widget.js
```

Date Widget

```
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_Date_Widget.js
```

Date Time Widget

```
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_DateTime_Widget.js
```

Decimal Widget

```
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_Decimal_Widget.js
```

Dynamic Select Widget

```
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_Select_Widget_Dynamic.js
```

Email Widget

```
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_Email_Widget.js
```

Number Widget

```
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_Number_Widget.js
```

Radio Group Widget

```
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_RadioGroup_Widget.js
```

Repeating Section Widget

```
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_Repeating_Section_Widget.js
```

Select Widget

```
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_Select_Widget.js
```

String Widget

```
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_String_Widget.js
```

Zip Code Widget

```
ibm.nitro.NitroConfig.runtimeResources.N=/custom-widgets/samples/acme/Acme_ZipCode_Widget.js
```

To include all the Acme widgets the configuration would look like: 

ibm.nitro.NitroConfig.runtimeResources.1 = <link rel='stylesheet' type='text/css' media='screen' href='/custom-widgets/samples/acme/Acme_Widgets.css' />
ibm.nitro.NitroConfig.runtimeResources.2 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_common.js'></script>
ibm.nitro.NitroConfig.runtimeResources.3 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_Boolean_Widget.js'></script>
ibm.nitro.NitroConfig.runtimeResources.4 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_Number_Widget.js'></script>
ibm.nitro.NitroConfig.runtimeResources.5 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_Date_Widget.js'></script>
ibm.nitro.NitroConfig.runtimeResources.6 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_Decimal_Widget.js'></script>
ibm.nitro.NitroConfig.runtimeResources.7 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_Email_Widget.js'></script>
ibm.nitro.NitroConfig.runtimeResources.8 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_String_Widget.js'></script>
ibm.nitro.NitroConfig.runtimeResources.9 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_RadioGroup_Widget.js'></script>
ibm.nitro.NitroConfig.runtimeResources.10 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_YesNo_Widget.js'></script>
ibm.nitro.NitroConfig.runtimeResources.11 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_ZipCode_Widget.js'></script>
ibm.nitro.NitroConfig.runtimeResources.12 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_DateTime_Widget.js'></script>
ibm.nitro.NitroConfig.runtimeResources.13 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_PageNavHeader_Widget.js'></script>
ibm.nitro.NitroConfig.runtimeResources.14 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_Select_Widget.js'></script>
ibm.nitro.NitroConfig.runtimeResources.15 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_Select_Widget_Dynamic.js'></script>
ibm.nitro.NitroConfig.runtimeResources.16 = <script nonce='#!#cspNonce!#!' type='text/javascript' src='/custom-widgets/samples/acme/Acme_Repeating_Section_Widget.js'></script>

Scribble Signature Widget

MUI - Star Rating and Switch Widgets

Parent topic: Custom Widget API