Getting Started

Besides backend part there is also an opportunity to build single page web application. For this purpose there are some utilities prepared at the js side which come out of the box, like routing, web socket communication and some helpers.

Access frontend framework

Usually access of javascript part of framework happens on the top of dom structure (like index.html) after js libraries have been loaded by creating an App object of MSM2 library:

<script src="https://cdn.jsdelivr.net/npm/text-encoding@0.6.4/lib/encoding.min.js"></script>
<script src="/build.js"></script>
<script>
  let app = new MSM2.App();
</script>

Server-Side Rendering
General info

HTML websocket client offers a number of utility functions for communication to websocket controller at back end side. Result message coming from back end (response on the function call) will be a MsmHtmlResponse object:

export class MsmHtmlResponse {
    constructor(
        public elements: MsmHtmlElement[],
        public actionId?: string
    ) {}
}

where MsmHtmlElement is:

export class MsmHtmlElement {
    constructor(
        public selector: string,
        public srcSelector: string,
        public html: string
    ) {}
}
Description

Front end listens on socket messages with MsmHtmlResponse and performs substitution of DOM element by html property of the response.

There are two versions of functions: that wait and that do not wait for response message. Functions that wait for response message have "$"-sign at the end of its name and return RxJS Observable: Observable<MsmHtmlResponse>. For Observables visit RxJS page. Subscription will be resolved after elements (see MsmHtmlResponse.elements) have been rendered. Functions that do not wait for response messages are straight "void" functions without result returning: rendering occurs asynchronous.

Routing

Single page routing of the framework always begins with "#" in this example: http://localhost:5000/user/index.html#certificate/page/1 it is "certificate/page/1" part.

Routing configuration

To set routing configuration you should use app.setRouting() function.

Attributes
Array of Route objects:
elements: RequestElement[] | Function,
url: string,
beforeNavigate?: string | Function,
afterNavigate?: string | Function
                    
Elements

Elements is an array of RequestElement objects, which describe what elements will be affected by navigation to the specified URL.

public elementId: string,   // id of element which will be changed
public path: string,        // path of new template which will replace the element
public payload: any,        // data which can be used on backend when template preparing occurs
                    
URL

It is a pattern of the URL which defines the match. Empty URL describes empty hash value or its absence: http://localhost:5000/user/index.html, it can contain definition of variables (as shown in the general usage bellow): certificate/page/${pageValue}. From multiple matching patterns the most specified will be used, for example: certificate/page/${pageValue} and certificate by visiting http://localhost:5000/user/index.html#certificate/page/1 will use certificate/page/${pageValue} pattern.

Before and after navigate

These hooks are functions, which will be called before call has been sent to the backend and after rendering on frontend finished. The functions can be wrapped in observables or promises.

Routing configuration usage
app.setRouting([
    {
        url: "",
        beforeNavigate: function() {
            showLoading(true);
        },
        elements: [{
            elementId: "userAccountMain",
            path: "user/index.html",
            payload: {
                path: "user/fragments/menu-user-account.html"
            }
        }],
        afterNavigate: function() {
            showLoading(false);
        }
    },
    {
        url: "products",
        beforeNavigate: function() {
            showLoading(true);
        },
        elements: [{
            elementId: "userAccountMain",
            path: "user/index.html",
            payload: {
                path: "user/sections/products.html"
            }
        }],
        afterNavigate: function() {
            showLoading(false);
        }
    },
    {
        url: "product/choose-type",
        elements: function (page) {
            var sectionUrl = "user/sections/choose-type-products.html";
            var payloadSection = { path : sectionUrl };
            var elements = [
               { elementId : "userAccountMain", path: "user/index.html", payload: payloadSection },
            ];
            return elements;
        },
    },
    {
        url: "certificate/page/${pageValue}", // last placeholder will allow you to use its value as pageValue variable
        beforeNavigate: function(pageValue) { // example of usage of this variable
            if(pageValue == 1){
                showLoading(true);
            }
        },
        elements: function(pageValue) {
            ...
            return elements;
        }
    }
]);
                        
ScriptHelper.evaluate : void
Description:

Simply evaluates javascript code as string.

Attributes:
  • script : string - javascript as string
    Required

Example:

MSM2.App.ScriptHelper.evaluates("console.log('example')");
ScriptHelper.getScriptAndEvaluate : Observable<void>
Description:

Evaluates javascript code from file/url. This function returns an observable.

Attributes:
  • url : string - script relative url
    Required
Example:

MSM2.App.ScriptHelper.getScriptAndEvaluate("/js/example.js").subscribe(
    function() {
        console.log("example.js code evaluated");
    }
);
HtmlHelper.getPayloadOfForm : any
Description:

Collects data from form inputs (input/textarea/select) and returns an object according name attributes and values of the inputs. Nested objects have syntax of array in name attributes. For example: <input name="firstLevel[secondLevel][thirdLevel]" type="text" value="hello"> will cause following nested object:

firstLevel: {
    secondLevel: {
        thirdLevel: "hello"
    }
}
Attributes:
  • formOrElementInForm : HTMLElement - is an element around which the inputs will be collected
    Required
  • formSelector : string - is the selector of element inside of which the inputs will be collected, 'form' by default
    Optional
Example:

MSM2.App.HtmlHelper.getPayloadOfForm(saveBtn.get(0), '#hello')
HtmlHelper.setPayloadToForm : void
Description:

This function can fill the form inputs according to payload. Nested objects have syntax of array in name attributes. For example payload of form:

firstLevel: {
    secondLevel: {
        thirdLevel: "hello"
    }
}

will update forms input: <input name="firstLevel[secondLevel][thirdLevel]" type="text"> and set value hello

Attributes:
  • formOrElementInForm : HTMLElement - is an element around which the inputs will be collected
    Required
  • payload : string - is an object with data to be set into form inputs
    Required
  • formSelector : string - is the selector of element inside of which the inputs will be collected, 'form' by default
    Optional
WebSocketService.renderPage : void
Description:

Requests to render the whole page.

WebSocketService.renderPage$ : Observable<MsmHtmlResponse>
Description:

Requests to render the whole page.

WebSocketService.renderElement : void
Description:

Requests rendering of specified elements.

Attributes:
  • elements : Array<RequestElement> - requested elements for rendering
    Required
  • payload : any - is an object with instructions for rendering an elements
    Optional
  • eventType : EventType - type of scope a websocket events subscriptions GLOBAL,SHARED,USER
    Optional
  • endpoint : string - the websocket url
    Optional
WebSocketService.renderElement$ : Observable<MsmHtmlResponse>
Description:

Requests rendering of specified elements.

Attributes:
  • elements : Array<RequestElement> - requested elements for rendering
    Required
  • payload : any - is an object with instructions for rendering an elements
    Optional
  • eventType : EventType - type of scope a websocket events subscriptions GLOBAL,SHARED,USER
    Optional
  • endpoint : string - the websocket url
    Optional
WebSocketService.invokeAndRender : void
Description:

It does invocation of method and requests rendering of specified elements.

Attributes:
  • beanId : string - bean unique name which contains in Spring web context
    Required
  • scope : BeanScopeType - the scope of existing bean in the web context REQUEST,SESSION,PROTOTYPE,APPLICATION,WEBSOCKET
    Required
  • functionName : string - the method name in the bean which will be executed
    Required
  • args : any - arguments which have in the called method like input parameters
    Required
  • elements : Array<RequestElement> - requested elements for rendering
    Required
  • eventType : EventType - type of scope a websocket events subscriptions GLOBAL,SHARED,USER
    Optional
  • endpoint : string - the websocket url
    Optional
WebSocketService.invokeAndRender$ : Observable<MsmHtmlResponse>
Description:

It does invocation of method and requests rendering of specified elements.

Attributes:
  • beanId : string - bean unique name which contains in Spring web context
    Required
  • scope : BeanScopeType - the scope of existing bean in the web context REQUEST,SESSION,PROTOTYPE,APPLICATION,WEBSOCKET
    Required
  • functionName : string - the method name in the bean which will be executed
    Required
  • args : any - arguments which have in the called method like input parameters
    Required
  • elements : Array<RequestElement> - requested elements for rendering
    Required
  • eventType : EventType - type of scope a websocket events subscriptions GLOBAL,SHARED,USER
    Optional
  • endpoint : string - the websocket url
    Optional
WebSocketService.updateBeanAndRender : void
Description:

It does update of bean and requests rendering of specified elements.

Attributes:
  • beanId : string - bean unique name which contains in Spring web context
    Required
  • scope : BeanScopeType - the scope of existing bean in the web context REQUEST,SESSION,PROTOTYPE,APPLICATION,WEBSOCKET
    Required
  • functionName : string - the method name in the bean which will be executed
    Required
  • args : any - arguments which have in the called method like input parameters
    Required
  • elements : Array<RequestElement> - requested elements for rendering
    Required
  • eventType : EventType - type of scope a websocket events subscriptions GLOBAL,SHARED,USER
    Optional
  • endpoint : string - the websocket url
    Optional
WebSocketService.updateBeanAndRender$ : Observable<MsmHtmlResponse>
Description:

It does update of bean and requests rendering of specified elements.

Attributes:
  • beanId : string - bean unique name which contains in Spring web context
    Required
  • scope : BeanScopeType - the scope of existing bean in the web context REQUEST,SESSION,PROTOTYPE,APPLICATION,WEBSOCKET
    Required
  • elementInForm : HTMLElement - the HTML element, which is included in the form element and this is action element
    Required
  • elements : Array<RequestElement> - requested elements for rendering
    Required
  • eventType : EventType - type of scope a websocket events subscriptions GLOBAL,SHARED,USER
    Optional
  • endpoint : string - the websocket url
    Optional
Html Websocket Client
addDocumentAndRender(db: string, col: string, elementInForm: HTMLElement, elements: Array<RequestElement>, eventType?: EventType, endpoint?: string) / addDocumentAndRender(...)
addDocumentAndRender(db: string, col: string, elementInForm: HTMLElement, elements: Array<RequestElement>, eventType?: EventType, endpoint?: string) / addDocumentAndRender(...)
removeDocumentAndRender(db: string, col: string, id: string, elements: ArrayArray<RequestElement>, eventType?: EventType, endpoint?: string) / removeDocumentAndRender$(...)

Functions request according MongoDB operation and perform rendering affected elements afterwards.

addToRepositoryAndRender(repositoryId: string, elementInForm: HTMLElement, elements: Array<RequestElement>, eventType?: EventType, endpoint?: string ) / addToRepositoryAndRender$(...)
saveToRepositoryAndRender(repositoryId: string, elementInForm: HTMLElement, elements: Array<RequestElement>, eventType?: EventType, endpoint?: string) / saveToRepositoryAndRender$(...)
removeFromRepositoryAndRender(repositoryId: string, elementInForm: HTMLElement, elements: Array<RequestElement>, eventType?: EventType, endpoint?: string ) / removeFromRepositoryAndRender$(...)

Functions request according MongoDB operation and perform rendering affected elements afterwards.

JSON Websocket Client
General info

HTML websocket client offers a number of utility functions for communication to websocket controller at back end side. Difference to HTML Websocket Client is that the call does not affect rendering. Similar to HTML Websocket Client it has two types of function: with and without return values. However the observable version of functions end with ...AndGetJson$ and return Observable<MsmJsonResponse>

export class MsmJsonResponse {
    constructor(
        public result: any,
        public actionId: string
    ) {}
}
invoke(beanId: string, scope: BeanScopeType, functionName: string, args: any, elements: Array<RequestElement>, eventType?: EventType, endpoint?: string ) / invokeAndGetJson$(...)

Requests a function call of certain bean.

updateBean(beanId: string, scope: BeanScopeType, elementInForm: HTMLElement, elements: Array<RequestElement>, eventType?: EventType, endpoint?: string) / updateBeanAndGetJson$(...)

Requests a bean update.

addToRepository(repositoryId: string, elementInForm: HTMLElement, elements: Array<RequestElement>, eventType?: EventType, endpoint?: string) / addToRepositoryAndGetJson$(...)
saveToRepository(repositoryId: string, elementInForm: HTMLElement, elements: Array<RequestElement>, eventType?: EventType, endpoint?: string) / saveToRepositoryAndGetJson$(...)
removeFromRepository(repositoryId: string, elementInForm: HTMLElement, elements: Array<RequestElement>, eventType?: EventType, endpoint?: string) / removeFromRepositoryAndGetJson$(...)

Functions request according MongoDB operation.

MSM Fragment Tag

This tag designed to use common fragments of HTML for including these fragments as part of the pages.

Attributes
  • id - unique identification for the tag.
    Required
  • path - the path to the fragment of HTML file.
    Required
  • param - the name of parameter in the URL, which is value of that will be pass into a fragment.
    Optional
Simple usage

<msm:fragment id="msm-fragment-1" path="path/to/fragment.html"/>

Usage with passing parameter into

<msm:fragment id="msm-fragment-1" path="path/to/fragment.html" param="${id}"/>

The param attribute allows to define a name for a parameter in the URL, for example we see the placeholder for a name of parameter is ${id}. That means if we make an address like a yourwebsite.com/site/id/page1.html, so this page1 value will be pass into a fragment path/to/fragment.html and after inside we can use ${fragment|@param} to retrieve this value page1.

Usage as a property call from a bean

<msm:fragment id="msm-fragment-1" bean="sessionBean" scope="SESSION" path="${path}"/>

This example shows us, how we can get a property value path from a bean with a name sessionBean. The scope attribute helps to make it clear for framework which scope the bean has.

MSM Rest Tag

This tag designed to use as REST client directly from a template.

Nested tags
  • <msm:template> - this tag used to keep HTML-representation for template of element. If the result will return a list of items, it will render template as repeated HTML-element.
    Required
  • <msm:empty> - this tag used to keep HTML-representation for template of element. If the result will return an empty item or list of items, it will render template as HTML-element.
    Optional
  • <msm:header> - this tag used to keep HTML-representation for header element.
    Optional
  • <msm:footer> - this tag used to keep HTML-representation for footer element.
    Optional
Attributes
  • id - unique identification for the tag.
    Required
  • endpoint - the endpoint of REST API.
    Required
  • method - the HTTP-method definition. It supports GET/POST.
    Required
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
  • request - the request body as JSON object for HTTP POST requests.
    Optional
  • header - this contains input JSON object for the header rendering.
    Optional
  • footer - this contains input JSON object for the footer rendering.
    Optional
HTTP POST usage

<div id="wrapperTag">
 <msm:rest id="restElementTag"
  endpoint="https://restapi.com/api/v1"
  request="{ 'searchTerms' : '${fragment|@param}' }"
  header="{ 'header-item-name' : 'h', 'city' : 'Foo' }"
  footer="{ 'footer-item-name' : 'f', 'name' : 'Bar' }"
  method="POST" item-name="item">
   <msm:empty><p>No results</p></msm:empty>
   <msm:header><h1>${h|city}</h1></msm:header>
   <msm:template><p>${item|value}</p></msm:template>
   <msm:footer><p>${f|name}</p></msm:footer>
 </msm:rest>
</div>

This tag allows to request easily a REST endpoint without any coding a new REST-client for any solution. In this snippet you can see an example for a POST call. The body with request arguments for a POST call specified in request attribute as JSON object.

HTTP GET usage

<div id="wrapperTag">
 <msm:rest id="restElementTag"
  endpoint="https://restapi.com/api/v1?arg1=Foo&arg2=Bar"
  header="{ 'header-item-name' : 'h', 'city' : 'Foo' }"
  footer="{ 'footer-item-name' : 'f', 'name' : 'Bar' }"
  method="GET" item-name="item">
   <msm:empty><p>No results</p></msm:empty>
   <msm:header><h1>${h|city}</h1></msm:header>
   <msm:template><p>${item|value}</p></msm:template>
   <msm:footer><p>${f|name}</p></msm:footer>
 </msm:rest>
</div>

This tag allows to request easily a REST-endpoint without any coding a new REST-client for any solution. In this snippet you can see an example for a GET call. The request arguments for a GET call can be specified as URL arguments, as usually.

MSM Foreach Tag

This tag allows to make an iteration through the items and render them as repeated HTML-element, which is defined in <msm:template> nested tag.

Nested tags
  • <msm:template> - this tag used to keep HTML-representation for template of item which will be returned as item in the list.
    Required
  • <msm:empty> - this tag used to keep HTML-representation for template of element. If the result will return an empty item or list of items, it will render template as HTML-element.
    Optional
  • <msm:header> - this tag used to keep HTML-representation for header element.
    Optional
  • <msm:footer> - this tag used to keep HTML-representation for footer element.
    Optional
Attributes (DATABASE)
  • id - unique identification for the tag.
    Required
  • database - the name of database in the MongoDB.
    Required
  • collection - the name of collection in the MongoDB.
    Required
  • filter - a query as JSON-Object in the MongoDB. The value can be empty or {}.
    Required
  • mode - a definition type of working mode for this tag.
    Required
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
  • header - this contains input JSON object for the header rendering.
    Optional
  • footer - this contains input JSON object for the footer rendering.
    Optional
Usage as a direct call from database

<ul id="wrapperTag">
 <msm:foreach id="foreachElementTag"
  database="companyDb"
  collection="users"
  filter="{ 'address.city' : 'San Jose' }"
  header="{ 'header-item-name' : 'headItem', 'title' : 'Foo' }"
  footer="{ 'footer-item-name' : 'bottomItem', 'page' : 'Bar' }"
  mode="DATABASE" item-name="user">
   <msm:empty><p>No results</p></msm:empty>
   <msm:header><h1>${headItem|title}</h1></msm:header>
   <msm:template><li>${user|name} - ${user|login} : ${user|address.street}</li></msm:template>
   <msm:footer><p>${bottomItem|page}</p></msm:footer>
 </msm:foreach>
</ul>

Attributes (BEAN)
  • id - unique identification for the tag.
    Required
  • bean - the name of bean in the application context.
    Required
  • items - method or property definition from the bean.
    Required
  • mode - a definition type of working mode for this tag.
    Required
  • scope - a scope of the bean. It supports PROTOTYPE and SESSION.
    Required
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
  • header - this contains input JSON object for the header rendering.
    Optional
  • footer - this contains input JSON object for the footer rendering.
    Optional
Usage as a property call from bean

<ul id="wrapperTag">
 <msm:foreach id="foreachElementTag"
  bean="employeeManagerService"
  items="employees"
  scope="PROTOTYPE"
  header="{ 'header-item-name' : 'headItem', 'title' : 'Foo' }"
  footer="{ 'footer-item-name' : 'bottomItem', 'page' : 'Bar' }"
  mode="BEAN" item-name="emp">
   <msm:empty><p>No results</p></msm:empty>
   <msm:header><h1>${headItem|title}</h1></msm:header>
   <msm:template><li>${emp|name} - ${emp|login} : ${emp|address.street}</li></msm:template>
   <msm:footer><p>${bottomItem|page}</p></msm:footer>
 </msm:foreach>
</ul>

Using as a method call with arguments

<ul id="wrapperTag">
 <msm:foreach id="foreachElementTag"
  bean="employeeManagerService"
  items="getEmployeesFromBranch(Foo;Bar)"
  scope="PROTOTYPE"
  header="{ 'header-item-name' : 'headItem', 'title' : 'Foo' }"
  footer="{ 'footer-item-name' : 'bottomItem', 'page' : 'Bar' }"
  mode="BEAN" item-name="emp">
   <msm:empty><p>No results</p></msm:empty>
   <msm:header><h1>${headItem|title}</h1></msm:header>
   <msm:template><li>${emp|name} - ${emp|login} : ${emp|address.street}</li></msm:template>
   <msm:footer><p>${bottomItem|page}</p></msm:footer>
 </msm:foreach>
</ul>

Attributes (REPOSITORY)
  • id - unique identification for the tag.
    Required
  • repository - the name of repository in the application context.
    Required
  • query - a query as JSON-Object in the MongoDB. The value can be empty or {}.
    Required
  • sort - a JSON-Object, which describes a sorting instructions and it has structure { 'name' : 'fieldName', 'direction' : 'ASC' }, or direction can be DESC.
    Optional
  • offset - an offset value.
    Optional
  • limit - a limit value.
    Optional
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
  • header - this contains input JSON object for the header rendering.
    Optional
  • footer - this contains input JSON object for the footer rendering.
    Optional
Usage as a property call from a repository

<ul id="wrapperTag">
 <msm:foreach id="foreachElementTag"
  repository="translationsRepository"
  query="{ lang : 'en' }"
  sort="{ 'name' : 'createdDate', 'direction' : 'DESC' }"
  offset="0"
  limit="10"
  header="{ 'header-item-name' : 'headItem', 'title' : 'Foo' }"
  footer="{ 'footer-item-name' : 'bottomItem', 'page' : 'Bar' }"
  mode="REPOSITORY" item-name="tr">
   <msm:empty><p>No results</p></msm:empty>
   <msm:header><h1>${headItem|title}</h1></msm:header>
   <msm:template><li>${tr|text} - ${tr|lang} : ${tr|createdDate}</li></msm:template>
   <msm:footer><p>${bottomItem|page}</p></msm:footer>
 </msm:foreach>
</ul>

MSM Block Tag

This tag allows to render object based on defined HTML-element inside <msm:template> nested tag.

Nested tags
  • <msm:template> - this tag used to keep HTML-representation for template of element.
    Required
Attributes (BEAN)
  • id - unique identification for the tag.
    Required
  • bean - the name of bean in the application context.
    Required
  • scope - a scope of the bean. It supports PROTOTYPE and SESSION.
    Required
  • function - method definition from the bean.
    Optional
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
  • value - this can be contain a JSON object to render the properties from it as inner object.
    Optional
Usage as a property call from a bean

<div id="wrapperTagFirst">
 <msm:block id="blockElementTagFirst"
  bean="employeeManagerService"
  function="getCEO(Foo;Bar)"
  scope="PROTOTYPE"
  mode="BEAN" item-name="emp">
   <msm:template><p>${emp|name} - ${emp|login} : ${emp|address.street}</p></msm:template>
 </msm:block>
</div>

<div id="wrapperTagSecond">
 <msm:block id="blockElementTagSecond"
  bean="factoryHolder"
  scope="SESSION"
  mode="BEAN" item-name="f">
   <msm:template><p>${f|name} - ${f|type} : ${f|address.city}</p></msm:template>
 </msm:block>
</div>

<div id="wrapperTagThird">
 <msm:block id="blockElementTagThird"
  value="{ 'name' : 'Foo Bar Factory' , 'type' : 'Automotive' , 'address' : { 'city' : 'New York' } }"
  scope="SESSION"
  item-name="f">
   <msm:template><p>${f|name} - ${f|type} : ${f|address.city}</p></msm:template>
 </msm:block>
</div>

MSM Condition (if) Tag

This tag allows to render object based on condition which will be checked in test attribute.

Attributes (BEAN)
  • id - unique identification for the tag.
    Required
  • bean - the name of bean in the application context.
    Required
  • scope - a scope of the bean. It supports PROTOTYPE and SESSION.
    Required
  • test - method or property definition from the bean, which could return true or false values.
    Required
Usage as a property call from a bean

<div id="wrapperTagFirst">
 <msm:if id="viewAccess"
  bean="userManager"
  test="isPermissionToView(Foo;Bar)"
  scope="PROTOTYPE" >
   <div>Restricted Access Granted</div>
 </msm:if>
</div>

<div id="wrapperTagSecond">
 <msm:if id="editorAccess"
  bean="userManager"
  test="isEditor"
  scope="SESSION" >
   <div>Restricted Access Granted</div>
 </msm:if>
</div>

MSM Tree Tag

This tag allows to make an iteration through the items as map and render them as tree HTML structure. Each nested item, which has sub-items must contain a children property to render as nested sub-tree element. The item for the iteration element is defined in <msm:template> nested tag.

Nested tags
  • <msm:template> - this tag used to keep HTML-representation for template of item which will be returned as item in the map.
    Required
Attributes (DATABASE)
  • id - unique identification for the tag.
    Required
  • database - the name of database in the MongoDB.
    Required
  • collection - the name of collection in the MongoDB.
    Required
  • filter - a query as JSON-Object in the MongoDB. The value can be empty or {}.
    Required
  • mode - a definition type of working mode for this tag.
    Required
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
Usage as a direct call from database

<div id="wrapperTag" class="root">
 <msm:tree id="treeElementTag"
  database="file-storage"
  collection="media"
  filter="{ 'extension' : 'mp4' }"
  mode="DATABASE" item-name="file">
   <msm:template><ul class="list-item"><li>${file|name}.${file|extension}</li></ul></msm:template>
 </msm:foreach>
</div>

Attributes (BEAN)
  • id - unique identification for the tag.
    Required
  • bean - the name of bean in the application context.
    Required
  • items - method or property definition from the bean.
    Required
  • mode - a definition type of working mode for this tag.
    Required
  • scope - a scope of the bean. It supports PROTOTYPE and SESSION.
    Required
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
Usage as a property call from bean

<div id="wrapperTag" class="root">
 <msm:tree id="treeElementTag"
  bean="mediaStorageService"
  items="getMovies(2020)"
  scope="PROTOTYPE"
  mode="BEAN" item-name="i">
   <msm:template><ul class="list-item"><li>${i|listItemName}</li></ul></msm:template>
 </msm:tree>
</div>

Attributes (REPOSITORY)
  • id - unique identification for the tag.
    Required
  • repository - the name of repository in the application context.
    Required
  • query - a query as JSON-Object in the MongoDB. The value can be empty or {}.
    Required
  • sort - a JSON-Object, which describes a sorting instructions and it has structure { 'name' : 'fieldName', 'direction' : 'ASC' }, or direction can be DESC.
    Optional
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
Usage as a property call from repository

<div id="wrapperTag" class="root">
 <msm:tree id="treeElementTag"
  repository="filesRepository"
  query="{ extension : 'pdf' }"
  sort="{ 'name' : 'createdDate', 'direction' : 'DESC' }"
  mode="REPOSITORY" item-name="doc">
   <msm:template><ul class="list-item"><li>${doc|name}</li></ul></msm:template>
 </msm:tree>
</div>

MSM Select Tag

This tag does rendering for <select/> based on HTML-template definition in <msm:template> nested tag as child element.

Nested tags
  • <msm:template> - this tag used to keep HTML-representation for template of item which will be returned as item in the list.
    Required
Attributes (DATABASE)
  • id - unique identification for the tag.
    Required
  • database - the name of database in the MongoDB.
    Required
  • collection - the name of collection in the MongoDB.
    Required
  • filter - a query as JSON-Object in the MongoDB. The value can be empty or {}.
    Required
  • mode - a definition type of working mode for this tag.
    Required
  • selectedValue - a definition of selected item in the list of options. It will compare this with property which has been used as value for the option.
    Optional
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
  • * - all available attributes for the <select/> HTML-tag.
    Optional
Usage as a direct call from database

<div id="wrapperTag" class="root">
 <msm:select id="selectElementTag"
  database="file-types"
  collection="media"
  filter="{}"
  mode="DATABASE" item-name="option" class="select-file-types">
   <msm:template><option class="item" value="${option|id}" ${option|selected}>${option|name}</option></msm:template>
 </msm:select>
</div>

Attributes (BEAN)
  • id - unique identification for the tag.
    Required
  • bean - the name of bean in the application context.
    Required
  • items - method or property definition from the bean.
    Required
  • mode - a definition type of working mode for this tag.
    Required
  • scope - a scope of the bean. It supports PROTOTYPE and SESSION.
    Required
  • selectedValue - a definition of selected item in the list of options. It will compare this with property which has been used as value for the option.
    Optional
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
  • * - all available attributes for the <select/> HTML-tag.
    Optional
Usage as a property call from bean

<div id="wrapperTag" class="root">
 <msm:select id="selectElementTag"
  bean="ecomSearchEngineServiceImpl"
  items="getCountries"
  scope="PROTOTYPE"
  name="countryOfOrigin.code"
  mode="BEAN" class="countries" item-name="cor">
   <msm:template><option class="option-item" value="${cor|code}" ${cor|selected}>${cor|name}</option>/msm:template>
 </msm:select>
</div>

Attributes (REPOSITORY)
  • id - unique identification for the tag.
    Required
  • repository - the name of repository in the application context.
    Required
  • query - a query as JSON-Object in the MongoDB. The value can be empty or {}.
    Required
  • sort - a JSON-Object, which describes a sorting instructions and it has structure { 'name' : 'fieldName', 'direction' : 'ASC' }, or direction can be DESC.
    Optional
  • selectedValue - a definition of selected item in the list of options. It will compare this with property which has been used as value for the option.
    Optional
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
  • * - all available attributes for the <select/> HTML-tag.
    Optional
Usage as a property call from repository

<div id="wrapperTag" class="root">
 <msm:select id="selectElementTag"
  repository="filesRepository"
  query="{ extension : 'pdf' }"
  sort="{ 'name' : 'createdDate', 'direction' : 'DESC' }"
  mode="REPOSITORY" item-name="doc">
   <msm:template><option>${doc|name}</option></msm:template>
 </msm:select>
</div>

Attributes (DIRECT)
  • id - unique identification for the tag.
    Required
  • items - this can be contain a JSON array to render the properties from it as inner array.
    Required
  • selectedValue - a definition of selected item in the list of options. It will compare this with property which has been used as value for the option.
    Optional
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
  • * - all available attributes for the <select/> HTML-tag.
    Optional

<div id="wrapperTag" class="root">
 <msm:select id="selectElementTag"
  value="[{ 'name' : 'Foo', 'description' : 'Bar' }]"
  selectedValue="Foo"
  mode="DIRECT" item-name="doc">
   <msm:template><option value="${doc|name}" ${doc|selected}>${doc|name} - ${doc|description}</option></msm:template>
 </msm:select>
</div>

MSM Text Tag

This tag allows to render properties from object as text which is defined as placeholders.

Attributes (BEAN)
  • id - unique identification for the tag.
    Required
  • bean - the name of bean in the application context.
    Required
  • scope - a scope of the bean. It supports PROTOTYPE and SESSION.
    Required
  • function - method definition from the bean.
    Optional
  • item-name - the item definition name for the placeholders inside msm:template tag.
    Optional
  • value - this can be contain a JSON object to render the properties from it as inner object.
    Optional
Usage as a property call from a bean

<div id="wrapperTagFirst">
 <msm:text id="blockElementTagFirst"
  bean="employeeManagerService"
  function="getCEO(Foo;Bar)"
  scope="PROTOTYPE"
  mode="BEAN" item-name="emp">
   ${emp|name} - ${emp|login} : ${emp|address.street}
 </msm:text>
</div>

<div id="wrapperTagSecond">
 <msm:text id="blockElementTagSecond"
  bean="factoryHolder"
  scope="SESSION"
  mode="BEAN" item-name="f">
   ${f|name} - ${f|type} : ${f|address.city}
 </msm:text>
</div>

<div id="wrapperTagThird">
 <msm:text id="blockElementTagThird"
  value="{ 'name' : 'Foo Bar Factory' , 'type' : 'Automotive' , 'address' : { 'city' : 'New York' } }"
  item-name="f">
  ${f|name} - ${f|type} : ${f|address.city}
 </msm:text>
</div>