Accessing Configuration Management

You Access this page through the App Management Tabs. From here you can manage many different things, for example the deployment targets - which determines where you can migrate things like templates, pages and layouts to. It is just a blob of JSON which can control a lot of different things.

The JSON Blob

Deployment

"Deployment": {
    "Targets": [
      {
        "Api": "https://demo.staging.corporatelinx.com/Api/",
        "Domain": "demo.staging.corporatelinx.com",
        "Name": "Demo (Staging)",
        "EnvironmentName": "Staging"
      }
    ],
    "DMS": [
      "Content",
      "Content/Slideshow"
    ]
  },
    

Here is where you set up the targets you wish to be able to migrate to from the app that you’re currently in “Api” is the Api you wish to communicate with, it’s a URL to one of our apps in any environment followed by “/Api/. “Domain” is the domain of the app you want to migrate to, “Name” is how it will appear in the drop down to select where you want to migrate to. “Environment” can be Dev, Test, Staging or Production. This is just an indicator of which environment your migration will be pushed to.

The “DMS”array determines what folders will be migrated when you select DMS in the migration dialog. This is particularly handy if you’re wanting to migrate their logos, or their log in page files.

B2B

  "B2B": {
        "SourceSystem": "Demo",
        "TransactionSource": "Demo",
        "Currencies": [
          "EUR",
          "GBP"
        ],
        "DefaultCurrency": "EUR",
        "RootBucket": "a4b5cc45-b36d-474c-9d7c-c8462859e5d0",
        "ExpiryTime": "23:59",
        "References": {
          "Systems": [
            "GlobalTax",
            "Demo"
          ]
        }
      },
    

This object is where you set up important things for the importation of Transactions into our system. “Source System” is the system in which the transactions sit, similar to the “Transaction Source”.

The “Currencies” array determines what currencies will be accepted in the system when transactions are imported & this determines whether or not charts will render correctly, if transactions are imported with a currency that is missing from this array, then they will not be visible in the charts.

“Default Currency” sets the currency that the vast majority of Transactions will be in.

“Root Bucket” this is the ID of the bucket where all Transactions will “live” and how we link the transaction to the particular app that you’re in.

“Expiry Time” is the time at which any early payment offers expire, here it is set in GMT, so all offers will expire at 23:59 GMT.

“References” are the references that are accepted by our system in this particular app, the GlobalTax reference is the Tax reference for the company you’re importing and your unique company reference will usually be denoted as “Demo|Reference” in our system and may be displayed as such in our UI.

Components

  "Components": {
        "Grids": {
          "DefaultPageSize": 40,
          "Details": "Expand,Link"
        }
    },
    

This defines key important features of grids in the UI, like the default page sizes, which ensures that there’s not an overwhelming amount of data being displayed in them. The “Details” indicates that they can be viewed either by using a link within the table or through being expanded in the grid.

Calendars

    "Calendars": {
            "primary": "37",
            "PaymentEventName": "Payment",
            "CutoffEventName": "Cutoff"
        },
    

This object determines what calendar will be used within the app by setting “primary” to the ID of the preferred calendar. It also sets up the possible events that can be set up within the calendar. The most common events are payment events and Cut Off events. What these names are set to, determine what they must be created as when setting up the calendar using the UI.

Themes

This object is what defines a lot of the customisable theming options, like what colours the clients would prefer to use, what they would like their borders to look like etc.

Default

    "Default": {
          "paintLoginMid": false,
          "margins": "4px",
          "paintLoginBottom": false,
          "shadows": "2px 2px 5px #333",
          "colours": {
            "primary": "#2F4A74",
            "secondary": "#ED8900",
            "background": "white",
            "text": "#222",
            "text2": "#FFFFFF",
            "links": "#214A71",
            "error": "red",
            "charts": [
              "#2F4A74",
              "#ED8900",
              "#2F4A74",
              "#ED8900",
              "#2F4A74"
            ]
          },
          "font": {
            "size": "11px",
            "family": "Quicksand, sans-serif"
          },
          "border": {
            "style": "solid 1px #ccc",
            "width": "1px",
            "radius": 0
          },
          "notifications": {
            "error": {
              "text": "#222",
              "background": "#FFECEC"
            },
            "warning": {
              "text": "#222",
              "background": "#FFF4D9"
            },
            "info": {
              "text": "#222",
              "background": "#E5F5FA"
            },
            "success": {
              "text": "#222",
              "background": "#EAF7EC"
            }
          }
        },
    
paintLoginMid This is what determines whether the app’s login page is displayed in the centre, if it is set to false then it will not be.
PaintLoginBottom This is what determines whether the app’s login page is displayed at the bottom, when it is set to true it will sit above the footer.
Margins This sets the default margins which are used by all components, it ensures that all white space between them are equal.
Colours - Primary This is one of two main colours used across the portals, it is specified by the client and should fit with their logo & be provided to us to ensure that the portal meets their expectations.
Colours - SecondaryThis is one of two main colours used across the portals, it is specified by the client and should fit with their logo & be provided to us to ensure that the portal meets their expectations.
Colours - Background This is the background colour of the portal, it is generally set to white.
Colours - Text This is the colour of the main body text, the colour of the vast majority of text within the app.
Colours - Text2 This is the colour of the second most used style of text.
Colours - Links This is the colour that any links across the portal will be displayed in.
Colours - Error Determines the colour of any errors that appear across the portals.
Colours - Charts This array sets the colours of any charts, they need to all be unique colours so that all data can be visualised in the portal correctly.
Font - Size This determines the size of all text across the portal.
Font - Family Sets the font of all text across the portal.
Border - Style This sets up a default style for the borders of components and anything else requiring one, you can set the colour and whether you want it dotted or solid (as an example).
Border - Width Sets the default border width.
Border - Radius This sets the border radius which determines how round the corners will be displayed.
Notifications - Errors You use this to set up the default notifications to be used on the app, typically error messages appear in red.
Notifications - Warning You use this to set up the default notifications to be used on the app, typically Warning messages appear in yellow.
Notifications - Info You use this to set up the default notifications to be used on the app, typically info messages appear in blue.
Notifications - Success You use this to set up the default notifications to be used on the app, typically success messages appear in green.

Dark

    "Dark": {
          "colours": {
            "primary": "#193855",
            "secondary": "#E2721D",
            "background": "#36393F",
            "text": "#222",
            "text2": "white",
            "links": "#E2721D",
            "error": "red"
          },
          "font": {
            "size": "11px",
            "family": "Verdana, Arial, 'Segoe UI', Tahoma, Geneva, sans-serif"
          },
          "border": {
            "style": "solid 1px white",
            "width": "1px",
            "radius": 0
          },
          "notifications": {
            "error": {
              "text": "#222",
              "background": "#FFECEC"
            },
            "warning": {
              "text": "#222",
              "background": "#FFF4D9"
            },
            "info": {
              "text": "#222",
              "background": "#E5F5FA"
            },
            "success": {
              "text": "#222",
              "background": "#EAF7EC"
            }
          },
          "shadows": "2px 2px 5px #333"
        }
    

This is where any custom dark theme would be set up, things that would be changed here are the colours to ensure that it’s just that little bit easier on the eyes and isn’t so glaring as black text on a white background. This is particularly useful when you have a sensitivity to bright lights. Please see above table of the explanations if you’re unsure of what changes you need to make here