How to export and import responsive page design layout of a screen in Sage X3 V12

By | June 23, 2021

In Sage X3, screens play a very important role and their layouts too. Sometimes, customer wants little more different layout or responsive than the standard screens of Sage X3. One exciting feature in Sage X3 is that it allows the user to change or modify with few possible options for customized screen layout for better user experience.

It may happen when the client requires the patch file and also wants the changed page design with its customization. The page design layout component of any screen cannot get added in the patch as X3 does not allow this during patch creation, also after patch integration the responsive page design does not get reflected with its effect and cannot create page design manually every time the client requires it.  This can be solved using Export and Import of pages.

Consider a Test screen with few fields and default page design layout as shown below.

We can add new responsive page design layout to this test screen which will look like as shown below figure.

So, to export this responsive page design layout,

Navigate to All -> Administration -> Utilities -> Exports -> Customization management

Click on “Action” button in top right corner of screen and click on “New Customization” option and create a new customization in which the responsive page design screen is present in the system. In representation option, enter the “window code” (here it “ZOTEST”) of that screen in which responsive page design is present and click on “Action” button in the top right corner of the screen and then click on “Export customization” option as shown in below figure.

This will export the responsive page design layout of which cannot be included in patch.

After clicking on “Export customization” button, the below screen appears.

Select Target type as “Direct download”(where the file will get downloaded) and tick the checkbox of “Beautify output”.

After clicking on “OK” button, the below screen appears, click on the download button as shown in below figure.

The “JSON” file for the responsive page design will get downloaded.

It can be imported in the system after the integration of the project in which the layout was needed to be added but cannot get included in the patch file.

Navigate to All -> Administration -> Utilities -> Imports -> Import tool

Select the source as “Client JSON file”, select the downloaded “JSON” file in client file option and click on “Action” button in top right corner of the screen and then click on “Import” option as shown in below figure.

After clicking on “Import” button, the responsive page design layout will get added into the respective screen as designed in the existing system.

This blog helps us to solve problem when responsive page design of a screen cannot be included in the patch and the user does not need to create the page design manually, we can add that responsive page design using above steps.