QoL for routing panel: Add data field in the properties panel(could be an advanced tab)

Show a field with the value of key “data”

{
      "path": "/partner/register",
      "url": "",
      "routeType": "page",
      "layout": "partner/auth",
      "page": "partner/_register",
      "data": {
        "id": "partner_register",
        "i18nfile": "partner_register",
        "js": [
          "dmxAppConnect/dmxValidator/dmxValidator.js"
        ],
        "css": [
          "dmxAppConnect/dmxValidator/dmxValidator.css"
        ]
      }
    },

Is it me the only weirdo who is using the data field in the routes?

As I add more and more info to the route itself I see myself opening routes.json in code view more and more often. Actually, I can’t remember the last time I opened the routes panel.

@JonL I’m very curious to see what use case you have for passing data in the routes?
This might be exactly what I am looking for.

Also where can I find some more documentation? A search in the community gave me another post from you New ejs tag added. Parsing ejs templates with Server Connect that didn’t make me much wiser :sweat_smile:

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 %>>

2 Likes