Dashboard layout for cell phones

Is there a way to control the order how blocks show up when viewing a dashboard on a small cell phone screen?
I read somewhere that it depends on in which order they were added when creating the dashboard. Is that correct?

Hi Lars,

There is not currently a way to control the block order on mobile separately from desktop, though your question has prompted some internal discussion about the platform’s mobile styling. The way blocks are currently rendered on mobile is a bit specific, but to describe it simply, your rows are turned on their sides to create the ordering.

If you have a dashboard you would like viewed exclusively on mobile, you can create your dashboard with full-width blocks in your desired order. This can provide more control over your blocks and ensure the view is cohesive between mobile and desktop.

Just as a visual example, I can expect to receive the labeled ordering when I view this dashboard on my mobile device:

Please let me know if you have any additional questions!

Thanks,
Julia

Is there a way to detect the screen size from the experience users session?
If I can do that, I could switch between different layouts depending on screen size.

@Lars_Andersson,

Good question. I created this example for you.

You should be able to accomplish this with user agent sniffing.

Here is how that would work:

  1. Create an Experience Endpoint called “/mobile-or-desktop”

  2. Using the Endpoint Wizard, create a new Experience Workflow.

  3. Adding a Function Node

Here, we can add the Function Node. Here is the code:

// Adapted from https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser

const mobileCheck = function (a) {
  let check = false;
  if (
    /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
      a
    ) ||
    /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
      a.substr(0, 4)
    )
  ) {
    check = true;
  }
  return check;
};

const isMobile = mobileCheck(payload.data.headers['user-agent'])

payload.pageData = payload.pageData || {}

// add isMobile to the payload
payload.pageData.isMobile = isMobile

This will place a new boolean value (true or false) at pageData.isMobile.

I adapted this from Stack Overflow. If you notice something wrong with the detection, please refer to this link and update your Function Node accordingly.

  1. Endpoint Reply Node

We can pass pageData to an Experience Page.

The Experience Page can have the following content:

{{#if pageData.isMobile}}

<p>Hello World from Mobile</p>

{{else}}

<p>Hello World from Desktop</p>

{{/if}}

I did some testing, it works pretty well:


To help you integrate this further, I made an export of the Experience Workflow and Endpoint above for you:

User Agent Example.zip

You can import it in your Application Settings.

1 Like

@Lars_Andersson,

Oh, and just to point out, you wanted to render two different Dashboards. You can do so by using pageData.isMobile in a Conditional Node and replying accordingly.

1 Like