Upgrade an existing Employee Training Management site to the new SharePoint experience

Applies to: Employee Training Management for Office 365/SharePoint online

Follow this guide if you are already using the Employee Training Management in a classic site and you would like to upgrade to the new SharePoint experience. If you want to install the Employee Training Management app from scratch, please follow the installation guide instead.

Download the latest version

You first have to download the latest app version. The app package contains the latest version of the Event Management app (Sapiens.at.SharePoint.ETM.app) and additional app you need to use all the features in the modern experience (sapiens.at.sharepoint.modernui.sppkg).

Download the latest version

Upload both apps to the app catalog

Upload both apps (Sapiens.at.SharePoint.ETM.app and sapiens.at.sharepoint.modernui.sppkg) from the downloaded package to your tenant’s app catalog.

After uploading the file sapiens.at.sharepoint.modernui.sppkg to the app catalog you also have to click on ‘Deploy’.

Update the SharePoint|sapiens Employee Management app on your website

Open your website, open site contents, click on the … menu next to the SharePoint|sapiens Employee Training Management app and click on Details.

Add the SharePoint|sapiens Modern User Interface to your website

Open your website, open site contents, click on New/App, click on ‘From your Organization’ and click on ‘SharePoint|sapiens Modern User Interface’.

Update the app settings

In site contents, click on the ‘SharePoint|sapiens Employee Management’ app, click on ‘Change Settings’, select the Experience section on the left and change the Experience to ‘New Experience’.

Click on Save to save the settings.

Manual configurations

Existing lists, views and columns will not be modified, because we don’t want to change your customization. We recommend the following changes to make sure your views are optimized to use the modern SharePoint experience.

• Use the column ‘Title (open item in dialog or full screen view)’ instead of ‘Title (linked to item with edit menu)’ in all views.
• Check the advanced list settings in all lists and make sure ‘Launch forms in a dialog?’ is set to Yes.
• Apply column formatting to highlight status and reply (see below)

Column formatting

If you want to highlight the Status column in all enrollment views, please open the list settings of the enrollment list, click on the Status column and paste the following JSON in the ‘Column Formatting’ textbox:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Enrolled', 'sp-field-severity--good', if(@currentField == 'Cancelled', 'sp-field-severity--blocked', if(@currentField == 'On Waiting List', 'sp-field-severity--warning', ''))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Enrolled', 'CheckMark', if(@currentField == 'Cancelled', 'ErrorBadge', if(@currentField == 'On Waiting List', 'Error', '')))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Enrolled', 'sp-field-severity--good', if(@currentField == 'Cancelled', 'sp-field-severity--blocked', if(@currentField == 'On Waiting List', 'sp-field-severity--warning', ''))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Enrolled', 'CheckMark', if(@currentField == 'Cancelled', 'ErrorBadge', if(@currentField == 'On Waiting List', 'Error', '')))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

If you want to highlight the Reply column in all enrollment views, please open the list settings of the enrollment list, click on the Reply column and paste the following JSON in the ‘Column Formatting’ textbox:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Accepted', 'sp-field-severity--good', if(@currentField == 'Invited', 'sp-field-severity--low', if(@currentField == 'Tentative', 'sp-field-severity--warning', if(@currentField == 'Declined', 'sp-field-severity--blocked', '')))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Accepted', 'CheckMark', if(@currentField == 'Invited', 'Forward', if(@currentField == 'Tentative', 'Error', if(@currentField == 'Declined', 'ErrorBadge', ''))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Accepted', 'sp-field-severity--good', if(@currentField == 'Invited', 'sp-field-severity--low', if(@currentField == 'Tentative', 'sp-field-severity--warning', if(@currentField == 'Declined', 'sp-field-severity--blocked', '')))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Accepted', 'CheckMark', if(@currentField == 'Invited', 'Forward', if(@currentField == 'Tentative', 'Error', if(@currentField == 'Declined', 'ErrorBadge', ''))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

If you want to highlight the Expiration column in all achievement views, please open the list settings of the achievement list, click on the ‘Date Expires’ column and paste the following JSON in the ‘Column Formatting’ textbox:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField, if(@currentField <= @now, 'sp-field-severity--blocked', ''), '') + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField, if(@currentField <= @now, 'ErrorBadge', ''), '')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField, if(@currentField <= @now, 'sp-field-severity--blocked', ''), '') + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField, if(@currentField <= @now, 'ErrorBadge', ''), '')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

I hope you found this information useful. If you have any problems or any other questions, please send an e-mail to support@sharepointsapiens.com.