Now you can define your own custom modules and formatters for Server Connect. You can write your own custom code but also provide a UI definition of your extensions so they integrate directly visually in Wappler!

Writing Extensions for Server Connect

Folder Structure

All extensions files are placed in your project folder under the following folders:

• for modules:
  extensions/server_connect/modules

• for formatters
  extensions/server_connect/formatters

Writing Server Code

The server code for your module or formatters depend on your server model. So check:

• Writing Custom Modules and Formatters (PHP)
• Writing Custom Modules and Formatters (NodeJS)
• Writing Custom Modules and Formatters (ASP)

Extensions UI

To define an UI for your module actions or formatters, you need to place a special Hjson file that describes your UI. Hjson is just a more readable json format that makes it easier to write.

The Module UI

You can place your Hjson file in extensions/server_connect/modules/mymodule.hjson
An example is:

{
  type: 'world_hello',
  module : 'world',
  action : 'hello',
  groupTitle : 'Custom Actions',
  groupIcon : 'fas fa-lg fa-database comp-data',
  title : 'Hello World',
  icon : 'fas fa-lg fa-table comp-data',
  dataScheme: [
    {name: 'name', type: 'text'},
    {name: 'age', type: 'number'}
  ],
  dataPickObject: true,
  globalVars: {
    '$_GET' : [
			{name: 'sort', type: 'text'},
			{name: 'dir', type: 'text'}
  		   ]
  },
  properties : [
    {
      group: 'Hello Properties',
      variables: [
        { name: 'actionName', optionName: 'name', title: 'Name', 
          type: 'text', required: true, defaultValue: ''},
        { name: 'actionData', optionName: 'data', title: 'Data',
          type: 'text', defaultValue: ''}
      ]
    }
  ]
}

As you can see the structure is pretty readable. You define a type name for your module, usually a combination of module name and action, give it some titles and icons, define the output scheme if needed and specify input variables.

Note: You can have multiple actions within the same module. So you can also have multiple UI definitions for those actions in the same Hjson file. Just put an array element around them - enclose them in brackets and make sure there is a comma between.

Module UI Options

Module UI Variables

For each group of UI input options you can have multiple variables with the following structure:

{ name: 'actionName', optionName: 'name', title: 'Name', 
  type: 'text', required: true, defaultValue: ''},

where:

The Formatter UI

You can place your HJson file in extensions/server_connect/formatters/myformatter.hjson
An example is:

{
  type: 'method_boeh',
  groupTitle : 'Custom Formatters',
  groupIcon : 'fa fa-lg fa-key',
  addTitle: 'Add Boeh',
  title : 'Add Boeh',
  icon : 'fa fa-lg fa-hashtag',
  state : 'opened',
  help : 'Say boeh en more',
  properties : [
    {
      group: 'Boeh Properties',
      variables: [
        {
            name: '1', optionName: '1', title: 'Param 1', type: 'text',
            serverDataBindings: true, defaultValue: '',
            help: 'Some great param.'
        }
      ]
    }
  ]
}

As you can see the structure is similar to the module UI, except you don’t have module and action. You define a type name for your module, must start with “method_” , give it some titles and icons, and specify input variables.

Note: You can have multiple formatters within the same code file. So you can also have multiple UI definitions for those formatters in the same Hjson file. Just put an array element around them - enclose them in brackets and make sure there is a comma between.

Formatter UI Options

Formatter UI Variables

For each group of UI input options you can have multiple variables with the following structure:

{ name: '1', optionName: '1', title: 'Param 1', 
  type: 'text', required: true, defaultValue: ''},

where:

Input Reference

For both Module UI and Formatters UI the same variables options are valid.

Display Types

Advanced Display Types

You can use also advanced display controls like dropdowns and multiple selectors

example:

{ name: 'oauth_service', optionName: 'service', title: 'Service', 
  type: 'droplist', 
  values: [
    {title: 'Google', value: 'google' },
    {title: 'Facebook', value: 'facebook' },
    {title: 'Instagram', value: 'instagram' },
    {title: 'Default', value: ''}
  ], defaultValue: '',
	help: 'Choose your OAuth2 Provider.'
}

Conditional Fields

Sometimes you need to show and hide some fields depending on chosen values of others.
So with the droplist field for example you can easily specify for each choice which fields to show or hide:

{ name: 'oauth_service', optionName: 'service', title: 'Service', 
  type: 'droplist', 
  values: [
    {title: 'Google', value: 'google', show:['oauth_key', 'oauth_url'], hide:[] },
    {title: 'Facebook', value: 'facebook', show:[], hide:['oauth_key', 'oauth_url'] },
    {title: 'Instagram', value: 'instagram', show:[], hide:['oauth_key', 'oauth_url'] },
    {title: 'Default', value: '', show:[], hide:['oauth_key', 'oauth_url']}
  ], defaultValue: '',
	help: 'Choose your OAuth2 Provider.'
},
{ name: 'oauth_key', optionName: 'key', title: 'Api Key', 
  type: 'text', defaultValue: '', initDisplay: 'none'},
{ name: 'oauth_url', optionName: 'url', title: 'URL', 
  type: 'text', defaultValue: '', initDisplay: 'none'},

Here only when Google is chosen, we display the additional two field otherwise they are just hidden - also initially with initDisplay option.

Color modifiers

Installing Required Node Modules

Your custom extensions for NodeJS might need some special Node Modules. Now you can specify those in the Hjson and they will be installed automatically. Just add the following in your Hjson definition. You can pass multiple modules and required versions.

		usedModules : {
			node: {
				"sharp": "^0.29.3"
			}
		}