Article Content

  1. Introduction
  2. What can I do if my AppState reaches the maximum size?


Introduction

The AppState contains:

  • Session Id
  • Current Page
  • Selected Filter Values
  • Selected Points (Highcharts)
  • Sorting of Columns (e.g of a Table Column ASC / DESC)
  • Variable Values (currently set Values of Variables)
  • The current Page of your Table / Highcharts Elements


What can I do if my AppState reaches the maximum size?

If you reached this point you should think about two basic questions:

  • Do you really need all of your Variables / Can you replace some of them?
  • Do you store Images or whole configurations of Elements in Variables?


To make it more clear we will explain possible solutions with an example usecase:

Let's assume you have 3 Pages in your App. All of these Pages should contain a Header section e.g (Customer Logo (HTML Element), Title (HTML Element) and a Filter Element (e.g. current Year))

To build such an App you have three possible options:


1. Hardcode

  • Add the Customer Logo (e.g. Base64 Image) directly at the Customer Logo Html Element
  • Add the Title directly in the Title Html Element
  • Add the selectedYear (e.g. "2020") to the Filter Element


Evaluation:

No problem with the AppState but maybe not the best way if you want to adjust / change or reuse a value later because you have to change the element configurations directly.


  // Elements
  {
    "id": "CustomerLogoPage1",
    "type": "html",
    "config": {
      "html": "<img src='someImageUrl...'>"
    }
  },
  {
    "id": "WelcomeTitlePage1",
    "type": "html",
    "config": {
      "html": "Welcome Title"
    }
  },
  {
    "id": "YearFilterPage1",
    "source": "testSource",
    "type": "filter",
    "config": {
      "column": "testColumn",
      "columnType": "STRING",
      "selectedFilter": ["2020"]
    }
  }


2. Use Variables

  • Create a Variable for the Customer Logo
  • Create a Variable for the Title
  • Create a Variable for the selected Year Filter Element
  • Add the Customer Logo Variable at the Customer Logo Html Element
  • Add the Title Variable at the Title Html Element
  • Add the selectedYear Variable at the Filter Element


Evaluation:

AppState can be really long as Base64 Images can be really big
App State could reach the maximum size if the Customer Logo code is very long
More work at the beginning but now every Value can be reused or changed by just changing the value of the Variable


  // Variables
  {
    "name": "customerLogoVariable",
    "type": "string",
    "default": "data:image/gif;base64,xdN4HhP ..... +0pCZbEhAAOw=="
  },
  {
    "name": "titleVariable",
    "type": "string",
    "default": "Welcome Title"
  },
  {
    "name": "selectedFilterVariable",
    "type": "string",
    "default": "2020"
  }
  // Elements
  {
    "id": "CustomerLogoPage1",
    "type": "html,
    "config": {
      "html": "",
      "$html": {
        "type": "string",
        "value": "<img src='{{customerLogoVariable}}'></p>"
      }
    }
  },
  {
    "id": "WelcomeTitlePage1",
    "type": "html",
    "config": {
      "html": "",
      "$html": {
        "type": "string",
        "value": "{{titleVariable}}"
      }
    }
  },
  {
    "id": "YearFilterPage1",
    "source": "testSource",
    "type": "filter",
    "config": {
      "column": "testColumn",
      "columnType": "STRING",
      "$selectedFilter": {
        "type": "string",
        "value": "{{selectedFilterVariable}}"
      }
    }
  }


3. Use Partials

  • Create a Partial for the Customer Logo
  • Create a Partial for the Title
  • Create a Partial for the selected Year Filter Element
  • Add the Customer Logo Partial at the Customer Logo Html Element
  • Add the Title Partial at the Title Html Element
  • Add the selectedYear Partial at the Filter Element


Evaluation

No Problem with the AppState -> Partials are not in the AppState More work at the beginning but now every Value can be changed by just changing the value of the Partial
Can be overwritten at the if you want to change it at Element level Almost the same amount of work as with Variables


  // Partials
  {
    "id": "CustomerLogoPartial",
    "partial": "data:image/gif;base64,R0lG ..... QBEAPeohAAOw=="
  },
  {
    "id": "TitlePartial",
    "partial": "Welcome Title"
  },
  {
    "id": "YearFilterPartial",
    "partial": ["2020"]
  }
  // Elements
  {
    "id": "CustomerLogoPage1",
    "type": "html",
    "config": {
      "html": "",
      "@html": {
        "partial": "CustomerLogoPartial"
      }
    }
  },
  {
    "id": "TitlePartial",
    "type": "html",
    "config": {
      "html": "",
      "@html": {
        "partial": "TitlePartial"
      }
    }
  },
  {
    "id": "html-test2",
    "type": "filter",
    "source": "raw_testSource",
    "config": {
      "column": "testColumn",
      "columnType": "STRING",
      "@selectedFilter": {
        "partial": "YearFilterPartial"
      }
    }
  }


Summary

Here is the summary on how long the AppState was (how many charachters were used) in the example for each possibility:


ExampleChar Count
1) Hardcoded93
2) Variables3364
3) Partials93