Ok.
So here are a few examples where I use data in the routes.
"layouts": {
"admin": {
"data": {
"js": [
"dmxAppConnect/dmxBootstrap4PagingGenerator/dmxBootstrap4PagingGenerator.js",
"dmxAppConnect/dmxStateManagement/dmxStateManagement.js",
"js/formatters.js",
"dmxAppConnect/dmxBootstrap4Tooltips/dmxBootstrap4Tooltips.js"
],
"css": [
"dmxAppConnect/dmxBootstrap4TableGenerator/dmxBootstrap4TableGenerator.css"
]
}
},
I like to specify js and css files in them. I find it easier to manage. I have a small script in the header partial that will load all the files for each route.
<!-- Load js defined in routes.json -->
<%
var routesJS = "";
if (typeof js !== 'undefined') {
js.forEach(jsItem => {
routesJS += '<script src="./'+jsItem+'"></script>'
})}
%>
<%- routesJS %>
<!-- Load css defined in routes.json -->
<%
var routesCSS = "";
if (typeof css !== 'undefined') {
css.forEach(cssItem => {
routesCSS += '<link rel="stylesheet" type="text/css" href="./'+cssItem+'">'
})}
%>
<%- routesCSS %>
You can add any 3rd party and some Wappler libraries, but not all. i.e. app connect. The UI will get in your way and keep on adding it to the page.
{
"path": "/admin/users",
"page": "/admin/resource",
"layout": "admin",
"data": {
"resource": "user",
"dt": "user",
"id": "users",
"i18nfile": "admin"
},
"routeType": "page",
"name": "Admin Users"
},
In this route I am specifying the id of the page, some data I need for the page to load the right data from SC and what is the name of the translation file.
resource
is used in a SC ajax call.
<dmx-serverconnect id="getResource" dmx-bind:url="'/api/<%=resource%>/admin/getAllPaged'" dmx-param:offset="query1.data.offset" dmx-param:limit="10"></dmx-serverconnect>
dt
is used to specify if the route will load a default datatable or a custom one(user datatable in my example).
<%- await include( typeof dt !== 'undefined' ? '/partials/admin/datatables/_dt_'+resource : '/partials/admin/datatables/_dt_default', Object.assign({}, locals)) %>
ì18nfile
is used in my i18next integration to specify which translation file to load.
.init({
debug: <%= $_ENV['NODE_ENV'] == 'development' %>,
whitelist: ['en', 'es'],
lng: dmx.parse("i18n.data[0].language") ? dmx.parse("i18n.data[0].language") : dmx.parse('browser.language.substr(0, 2)'),
fallbackLng: 'en',
ns: ['<%- i18nfile %>', 'common'],
defaultNS: '<%- i18nfile %>',
backend: { loadPath: '/assets/translations/{{lng}}/{{ns}}.ftl' }
})
.then(updateDOM)
id
is used in the layout body tag
<body class="application application-offset" is="dmx-app" dmx-show="translationLoaded" id=<%= id %>>