Skip to Content
Technical Articles
Author's profile photo Jens Niemeyer

Creating a custom rule editor for CX in SAPUI5

SAP C4C comes with an internal rule editor for defining rules for validation/visibility of fields within the Key User Tool (KUT).

A simple rule could exists out of one line, e.g. the following rule defines, that the internal notes areĀ  only enabled, if the ticket is in edit mode:

A%20simple%20rule%20in%20the%20CX%20rule%20editor

A simple rule in the CX rule editor, (c) Jens Niemeyer

 

The example of the rule is simply written in one line and even with a linebreak it is readable.

 

The challenge

When it comes to more complex scenarios for the rules, the rule have to match the following criteria:

  • all content is in “one line”
  • no line break within the rule
  • no comments or spaces, to make the rule readable

 

In the following screenshot you see a real rule, based on a customer requirement:

A%20complex%20rule.

A complex rule (c) Jens Niemeyer.

So gues what the rule is doing? How it is working? How can you change the rule, if the customer does have new ideas?

The big gaps in the CX rule editor are:

  • not readable source code
  • to small textarea for your source code
  • no “pretty print” on your code.

 

To overcome this issue I build my own editor in SAPUI5.

  • All rule sources are saved in a “pretty printed” form in an Excel sheet or other *.txt Files
  • In the rule editor I copy and paste the code and edit it
  • with “copy to clipboard” I copy a C4C conform version into the clipboard, which I could paste in the original C4C rule editor

My editor is shown in next screenshot.

In the editor window (1), you can write your readable code.
This code should be saved in a version control system or directory for later changes.

With “Copy to clipboard” (2) you will get a CX conform version of the rule in your clipboard, which could be pasted in the CX rule editor.

To have access to the clipboard is is mandatory, that you run the HTML file locally (3) e.g. from your desktop.

 

My%20own%20offline%20rule%20editor

My own offline rule editor, (c) Jens Niemeyer

If you like, you can copy my code from the section below, place it on your desktop and open it with a double click.

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="UTF-8">
 
    <title>Rule Editor Convertor by Jens Niemeyer</title>
 
    <script id="sap-ui-bootstrap"
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-preload="async"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-frameOptions='allow'>    
    </script>
 
    <script id="startpage" type="ui5/xmlview">




        <mvc:View
            controllerName="${UI5_Namespace}.controller.${NAME}"
            displayBlock="true"
            xmlns="sap.m"
            xmlns:l="sap.ui.layout"
            xmlns:core="sap.ui.core"
            xmlns:c="sap.ui.codeeditor"
            xmlns:mvc="sap.ui.core.mvc">
            <Page title="C4 Rule Converter">
            		<headerContent>
			<Button press="pressBtn" icon="sap-icon://paste" text="Copy to clipboard" />
		</headerContent>
                <content>
                		<c:CodeEditor type="javascript" 
                						height="80%" id="txt"
                   					liveChange="onUpdate">
					</c:CodeEditor>
                   	
                   			<TextArea width="100%" enabled="false" id="newText"                   					
                   			height="10%"></TextArea>
                   			
                </content>
            </Page>
        </mvc:View>
    </script>
    <script>
        sap.ui.getCore().attachInit(function () {
            "use strict";
 
            sap.ui.define([
                "sap/ui/core/mvc/Controller"
            ], function (Controller) {
                return Controller.extend("${UI5_Namespace}.controller.${NAME}", {


                    pressBtn: function (oEvent) {
                        
                        //debugger;
                    	let textToCopy =this.getView().byId("newText").getValue();

						async function copyToClipboard() {
						  try {
						    await navigator.clipboard.writeText(textToCopy);
							sap.m.MessageToast.show("Copied to clipboard");
						    // 2) Catch errors
						  } catch (err) {
						    console.error('Failed to copy: ', err);
						    sap.m.MessageToast.show("Failed to copy");
						  }
						}	
                        copyToClipboard();
  						
                    },

                    onUpdate: function (oEvent) {

                        var txt 		= this.getView().byId("txt").getCurrentValue();
                        var newText		= txt.replaceAll("\t", " ");
                        newText			= newText.replaceAll("\n", " ");
                        newText			= newText.replaceAll("\r", " ");
                        newText			= newText.replaceAll("  ", " ");
                        newText			= newText.replaceAll(" ", "");

                       
                        this.getView().byId("newText").setValue(newText);	
                    },
                });
            });
 
            sap.ui.require([
                "jquery.sap.global"
            ], function (jQuery) {
                sap.ui.xmlview({
                    viewContent: jQuery("#startpage").html()
                }).placeAt('root');
            });
 
        });
    </script>
</head>
<body class="sapUiBody" id="root"/>
</html>

(c) Jens Niemeyer, feel free to copy code and reuse it for your own needs

 

Conclusion

With this simple to use editor you can easily write powerful rules for the key user tool (KUT).

You can take the source code as a basis for a more complex App, where you could store all sources of your rules in a local directory (running the app locally, it should be possible to access the file system) ans store them in a version control system.

And perhaps SAP Development uses the code to enhance the KUT rule editor in the future.

I would really appriciate, if they

  • use the UI5 lib for color high lighting
  • enable a full screen dialog, to see as much as possible from the rules code

Feel free, to add comments or thougts on my simple approach.

Yours
Jens

 

 

 

 

 

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.