javascript Widget编辑器中的Sytax Editor宏（服务门户高级课程的实验2.1）

Posted 2021-05-03

/**
(A) Create the UI Script to Enable Syntax Editor Macros
1. System UI > UI Scripts
2. Select New.
  API name: widgetMacros
  Script: enter widgetMacros followed by the <tab> key on your keyboard. (or alternatively see code below)
3. Submit

(B) Associate the UI script to the Widget Editor
1. Service Portal > Widgets
2. Open Widget Edit Panel
3. Scroll to bottom of the form and select New on the dependencies Related List.
  Name: widgetMacros
4. Save the record, remain on the form.
5. Select New on the JS includes related list
  Display name: widgetMacros
  Source: UI Scropt
  UI Script: widgetMacros
6. Submit

(C)Now create the macros you want to be able to use in the Widget Editor (see below)
System Definition --> Syntax Editor Macros --> NEW
*/
Name: sp_client
function() {
   /* widget controller */
   var c = this;

   /* Step 3. Accept user input */
	
}

Name: sp_html
<form>
  
  <!-- Step 2. Display initial data from the server -->
  
  
  
  <!-- Step 5. Display customized content based on user input -->
  
  
</form>

Name: sp_server

(function() {

	/* Step 1. Load initial data from the server */
			/* populate the 'data' object */
			/* e.g., data.table = $sp.getValue('table'); */

	if(!input) {
		
	}



	/* Step 4. Process user input */
	
	if(input) {
		
	}

})();

/**
(D) Use the Syntax Editor Macros
e.g type sp_html then <tab> for the html steps
Use the sp_html, sp_client and sp_server Syntax Editor Macros in the appropriate panels

*/
  
(function(){
  
  //object to store macros in
  var macrosObj={
  };
  
  var fn = function(e){
    var keyCode = e.keyCode || e.which;
    
    //check if key pressed is TAB
    if (keyCode == 9) {
      
      //get DOM element for active pane
      var cmEl = jQuery(document.activeElement).parents('.CodeMirror')[0];
      
      //get CodeMirror object for active pane. CodeMirror is the Syntax Editor library used in the Widget Editor
      var cmObj = cmEl.CodeMirror;
      
      //get position of cursor and end of line
      var tmpCursor=cmObj.getCursor();
      var eol=cmObj.getLine(tmpCursor.line).length;
      
      //do nothing if cursor is not at end of line
      //this allows users to continue using TAB key for formatting/indentation
      if(tmpCursor.ch < eol){
        return true;
      }
      
      //do nothing if any text is selected
      if(cmObj.somethingSelected()){
        return true;
      }
      
      //find the start and end position of the word preceeding the cursor
      var wordObj = cmObj.findWordAt({
        line: tmpCursor.line,
        ch: tmpCursor.ch-2
      });
      
      //get the actual word preceeding the cursor
      var word = cmObj.getRange(wordObj.anchor, wordObj.head);
      
      //do nothing if a corresponding Syntax Editor Macro does not exist
      if(typeof macrosObj[word]==='undefined')
        return true;
      
      //select the word preceeding the cursor
      var sel = cmObj.setSelection(wordObj.anchor,wordObj.head);
      
      //replace selection with the text of the Syntax Editor Macro
      cmObj.replaceSelection( macrosObj[word].text );
    }
  };
  
  //add keyup event listener
  jQuery(window).on('keyup', fn);
  
  //populate macrosObj with records from the Syntax Editor Macro table
  var requestBody = "";
  var client=new XMLHttpRequest();
  client.open("get","/api/now/table/syntax_editor_macro?sysparm_fields=name%2Ctext");
  
  client.setRequestHeader('Accept','application/json');
  client.setRequestHeader('Content-Type','application/json');
  client.setRequestHeader('X-UserToken',window.g_ck);
  
  var rsc = function(){
    if(this.readyState == this.DONE) {
      var rspObj=JSON.parse(this.response).result;
      for(var macro in rspObj){
        if(!rspObj.hasOwnProperty(macro))
          continue;
        
        var currentMacro=rspObj[macro];
        macrosObj[currentMacro.name]=currentMacro;
      }
    }
  };
  
  client.onreadystatechange = rsc;
  client.send(requestBody);
})();