ccm Action Data

content is up-to-date for ccm v18.0.6

Description

Via ccm Action Data, function calls can be specified in JSON and can therefore also be stored in databases and sent via network protocols and can be flexibly executed at a later time.

ccm Action Data consists of an array that contains the function name as the first element and in the other elements optional the parameters which should be passed to the function.

To perform the specified function call, the ccm Action Data simply has to be passed to the helper function ccm.helper.action as first parameter. The return value of this helper function is the return value of the performed function call.

The most common case of using ccm Action Data is specifying dependencies to other external resources within the configuration of a ccm instance.

Syntax

[ function_name, param1, param2, ... ]

Example

[ "alert", "Hello, World!" ]

Function of a Global Namespace

Functions within a global namespace can be addressed by dot notation:

[ "console.log", "foo" ]

Function Call with Return Value

function add( a, b ) { return a + b; }
const result = ccm.helper.action( [ "add", 1, 2 ] );
console.log( result );  // Result in the browser console: 3

Load remote JSON data

const resource = await ccm.helper.action( [ "ccm.load", {
  "url": "https://ccmjs.github.io/ccm/unit_tests/dummy/data.json",
  "method": "get"
} ] );
console.log( resource );  // Result in the browser console: { "foo": "bar" }

ES6 module import

Import ES6 module from a JavaScript file on a remote server and call a JavaScript function asynchronously:

const result = await ccm.helper.action( [ "ccm.load", {
  "url": "https://ccmjs.github.io/ccm/unit_tests/dummy/hello_world.js",
  "type": "module",
  "import": "hello_world"
} ] );
console.log( result );  // Result in the browser console: "Hello World"

hello_world.js on another server (CORS allowed)

export function hello_world() {
  return "Hello World";
}

Setting of ccm Dependencies

/** ccm instance configuration */
const config = {

  // dependency to a stylesheet file
  "css": [ "ccm.load", "resources/default.css" ],

  // dependency to a ccm component
  "menu": [ "ccm.component", "../menu/ccm.menu.js", config_for_menu ],

  // dependency to a ccm instance and a dataset
  "user": [ "ccm.instance", "../user/ccm.user.js", config_for_user ],

  // dependency to a ccm datastore
  "store": [ "ccm.store", settings_for_datastore ]

};

Set Click Actions for Menu Entries

window.fun = param => console.log( param );

ccm.start( 'https://ccmjs.github.io/akless-components/menu/versions/ccm.menu-2.4.1.js', {
  root: document.body,
  "css": [ "ccm.load", "https://ccmjs.github.io/akless-components/menu/resources/tabs.css" ],
  "data": {
    "entries": [
      {
        "title": "Menu Item A",
        "content": "Content of menu entry A",
        "actions": [ [ "fun", "foo" ], [ "fun", "bar" ] ]
      },
      {
        "title": "Menu Item B",
        "content": "Content of menu entry B",
        "actions": [ [ "alert", "Performed action of menu entry B." ] ]
      },
      {
        "title": "Menu Item C",
        "content": "Content of menu entry C",
        "actions": [ [ "console.log", "Performed action of menu entry C." ] ]
      }
    ]
  }
} );