Difference between revisions of "Input Plugin"

From MSX - Wiki
Jump to navigation Jump to search
Line 12: Line 12:
 
* <code>content:request:interaction:{URL}|{TYPE}|{DEFAULT_LANG}|{HEADLINE}|{BACKGROUND}|{EXTENSION}|{HINT}@http://msx.benzac.de/interaction/input.html</code>
 
* <code>content:request:interaction:{URL}|{TYPE}|{DEFAULT_LANG}|{HEADLINE}|{BACKGROUND}|{EXTENSION}|{HINT}@http://msx.benzac.de/interaction/input.html</code>
 
* <code>content:request:interaction:{URL}|{TYPE}|{DEFAULT_LANG}|{HEADLINE}|{BACKGROUND}|{EXTENSION}|{HINT}|{PLACEHOLDER}@http://msx.benzac.de/interaction/input.html</code>
 
* <code>content:request:interaction:{URL}|{TYPE}|{DEFAULT_LANG}|{HEADLINE}|{BACKGROUND}|{EXTENSION}|{HINT}|{PLACEHOLDER}@http://msx.benzac.de/interaction/input.html</code>
 +
* <code>content:request:interaction:{URL}|{TYPE}|{DEFAULT_LANG}|{HEADLINE}|{BACKGROUND}|{EXTENSION}|{HINT}|{PLACEHOLDER}|{LIMIT}@http://msx.benzac.de/interaction/input.html</code>
  
 
The <code>{TYPE}</code> part can be set to one of the following values.
 
The <code>{TYPE}</code> part can be set to one of the following values.
Line 29: Line 30:
 
* <code>ru</code>: Russian keyboard layout
 
* <code>ru</code>: Russian keyboard layout
 
Please note that the keyboard layout can also be changed at runtime.
 
Please note that the keyboard layout can also be changed at runtime.
 +
 +
The <code>{LIMIT}</code> part can be set to enable paging. For more information, please see the [[Paging Plugin]].
  
 
The content service URL should contain the keyword <code>{INPUT}</code>, which is replaced with the corresponding value. Please see following action syntax examples.
 
The content service URL should contain the keyword <code>{INPUT}</code>, which is replaced with the corresponding value. Please see following action syntax examples.
Line 75: Line 78:
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
Please note that for responses that contain a <code>template</code> and <code>items</code> property, the properties <code>headline</code>, <code>extension</code>, <code>background</code>, and <code>hint</code> will also be used (and will replace potential initial values). Please also note that the root content is compressed (i.e. the layout grid size is 16x8). Therefore, for uncompressed content, the <code>decompress</code> property in the <code>template</code> object is set to <code>true</code>. However, the decompression feature is only available in version '''0.1.155''' or higher. If you want to display compressed content, please ensure the <code>compress</code> property is set to <code>true</code> in your response data.
+
Please note that for responses that contain a <code>template</code> and <code>items</code> property, the properties <code>headline</code>, <code>extension</code>, <code>background</code>, and <code>hint</code> will also be used (and will replace potential initial values). Please also note that the root content is compressed (i.e. the layout grid size is 16x8). Therefore, for uncompressed content, the <code>decompress</code> property in the <code>template</code> object is set to <code>true</code>. However, the decompression feature is only available in version '''0.1.155''' or higher. If you want to display compressed content, please ensure the <code>compress</code> property is set to <code>true</code> in your response data. Similar to the [[Paging Plugin]], the input plugin supports paging if the URL contains the keywords <code>{OFFSET}</code> AND <code>{LIMIT}</code> and a limit is specified.
  
 
If you would like to use the plugin as reference to implement your own plugin, please have a look at this implementation script: http://msx.benzac.de/interaction/js/input.js.
 
If you would like to use the plugin as reference to implement your own plugin, please have a look at this implementation script: http://msx.benzac.de/interaction/js/input.js.

Revision as of 09:32, 16 March 2024

This is a special interaction plugin that allows you to handle complex and multilingual inputs for special use cases (e.g. entering user names/emails/passwords, performing search queries, etc.). In order to use this plugin, a corresponding content service must be implemented that processes the entered input (e.g. by evaluating an input parameter). The plugin can be used with version 0.1.123 or higher.

Usage[edit]

The plugin must be loaded with a content service URL that is able to process the input (which is generally set as input URL parameter). Optionally, a type, a default language, a headline, a background, an extension, a hint, and/or placeholder can be set. Please see following action syntax examples.

The {TYPE} part can be set to one of the following values.

  • default: Default input
  • secret: Secret input (this type can be used for passwords and hides the input by default)
  • search: Search input (this type can be used for search queries and automatically submits the input after it has been changed)

Optionally, the required submit length can be indicated (by default, it is set to 1) with the format {TYPE}:{LENGTH} (e.g. search:3).

The {DEFAULT_LANG} part can be set to one of the following values.

  • en: English keyboard layout
  • fr: French keyboard layout
  • de: German keyboard layout
  • es: Spanish keyboard layout
  • pt: Portuguese keyboard layout
  • it: Italian keyboard layout
  • tr: Turkish keyboard layout
  • ru: Russian keyboard layout

Please note that the keyboard layout can also be changed at runtime.

The {LIMIT} part can be set to enable paging. For more information, please see the Paging Plugin.

The content service URL should contain the keyword {INPUT}, which is replaced with the corresponding value. Please see following action syntax examples.

The content service should return either an action property (with an optional data property) to be executed (e.g. for user logins) or a template and items property to display the results (e.g. for search queries). Please see this example code how a user login response can look like.

{
    "action": "reload"
}

The next example code shows how a search query response can look like.

{
    "headline": "{ico:search} \"Video\"",  
    "hint": "Found 3 items",
    "template": {           
        "type": "separate",
        "layout": "0,0,2,4",
        "icon": "msx-white-soft:movie",
        "color": "msx-glass"
    },
    "items": [{            
            "title": "Video 1",
            "playerLabel": "Video 1",
            "action": "video:http://msx.benzac.de/media/video1.mp4"
        }, {
            "title": "Video 2",
            "playerLabel": "Video 2",
            "action": "video:http://msx.benzac.de/media/video2.mp4"
        }, {
            "title": "Video 3",
            "playerLabel": "Video 3",
            "action": "video:http://msx.benzac.de/media/video3.mp4"
        }]
}

Please note that for responses that contain a template and items property, the properties headline, extension, background, and hint will also be used (and will replace potential initial values). Please also note that the root content is compressed (i.e. the layout grid size is 16x8). Therefore, for uncompressed content, the decompress property in the template object is set to true. However, the decompression feature is only available in version 0.1.155 or higher. If you want to display compressed content, please ensure the compress property is set to true in your response data. Similar to the Paging Plugin, the input plugin supports paging if the URL contains the keywords {OFFSET} AND {LIMIT} and a limit is specified.

If you would like to use the plugin as reference to implement your own plugin, please have a look at this implementation script: http://msx.benzac.de/interaction/js/input.js.

Note: Currently, the input plugin cannot be used with panels. Please also note that all requests to the content service are HTTP GET requests.

Syntax[edit]

Parameter syntax of content service for input plugin
Parameter Type Default Value Mandatory Description
input string "" Yes

The input that should be processed.

credentials void n/a No

A keyword that indicates that user credentials (e.g. cookies, authorization headers, etc.) are enabled for content service requests. Technically, this keyword sets the withCredentials flag for the XMLHttpRequest object to true. If the content service uses HTTP sessions and manages them via cookies, you should add this keyword.

Example[edit]

Screenshot[edit]

Example Screenshot (Input Plugin)

Code[edit]

{
    "type": "pages",
    "headline": "Input Plugin Test",
    "template": {
        "enumerate": false,
        "type": "button",
        "layout": "0,0,3,3"
    },
    "items": [{
            "icon": "keyboard",
            "label": "Default",
            "action": "content:request:interaction:http://msx.benzac.de/services/input.php?input={INPUT}&type=default|default|en|Default Input Example|||Click on {ico:msx-white:done} to submit input@http://msx.benzac.de/interaction/input.html"
        }, {
            "icon": "password",
            "label": "Secret",
            "action": "content:request:interaction:http://msx.benzac.de/services/input.php?input={INPUT}&type=secret|secret|en|Secret Input Example|||Click on {ico:msx-white:done} to submit secret input@http://msx.benzac.de/interaction/input.html"
        }, {
            "badge": "Compressed",
            "icon": "search",
            "label": "Icon Search",
            "action": "content:request:interaction:http://msx.benzac.de/services/input.php?input={INPUT}&type=search|search|en|{ico:search} {col:msx-white-soft}Search for Icons|||Enter at least one character to start searching|Icon Name@http://msx.benzac.de/interaction/input.html"
        }, {
            "badge": "Decompressed",
            "icon": "search",
            "label": "Image Search",
            "titleFooter": "0.1.155+{br}{br}{br}",
            "alignment": "center",
            "action": "content:request:interaction:http://msx.benzac.de/services/input.php?input={INPUT}&type=pixabay|search|en|{ico:search} {col:msx-white-soft}Search for Images|||Enter at least one character to start searching|Image Name@http://msx.benzac.de/interaction/input.html"
        }, {
            "icon": "login",
            "label": "Login",
            "action": "execute:fetch:http://msx.benzac.de/services/input.php?type=login"
        }]
}

Demo[edit]

See also[edit]