add an attachment functionality to an existing widget.

SNnewbie2 · ‎05-16-2018

I have a widget with the name of feedback. i want to add the functionality of adding attachment to my form. I know there is an attachment widget in SP but I find it quite confusing. I know all the attachment are save in sys_attachment. I'm not sure how to implement this. I was thinking about querying the sys_attachment table and then save the input to some variable in the table?

var attach= new GlideRecord('attachment');
attach.initialize();
attach.___"something"  = input.attachment;

Could you guys provide an example of how to approach this?

I have provided my html, client script, and server script.

HTML

<div ng-if="c.modal">
  <div class="feedback-gray" ng-click="c.toggleModalDisplay()">
  </div>
  <div class="feedback-form" ng-if="c.modal && !c.showSuccess">
    <div class="panel panel-default">
      <div class="panel-body">
        <form name="feedbackForm">
          <button type="button" class="close" aria-label="Close" aria-hidden="true" ng-click="c.resetModalFlow()">&times;</button>
          <div class="form-group">
            <h2>Tell us how we are doing</h2>
          </div>
          <div class="form-group required">
            <label>Title </label>
            <input class="form-control" ng-model="c.data.short_description" name="title" required>
          </div>
          <div class="form-group required">
            <label>Description</label>
            <textarea class="form-control" rows="5" ng-model="c.data.description" name="description" required></textarea>
          </div>
          <div class="form-group">	
            <label class="btn btn-primary">
                Attachment&hellip; <input type="file" style="display: none;">
            </label>
          </div>
          <div class="form-group">
            <label>Email</label>
            <input class="form-control" ng-model="c.data.email" name="email">
          </div>
          <div class="form-group">
            <input class="btn btn-primary btn-block" ng-click="c.addItem()" type="submit" value="Submit" ng-disabled="!feedbackForm.title.$valid || !feedbackForm.description.$valid">
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="feedback-form" ng-if="c.modal && c.showSuccess">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="form-group">
          <h2>Thanks for your feedback!</h2>
        </div>
        <div class="form-group">
          <input class="btn btn-primary btn-block" ng-click="c.resetModalFlow()" type="submit" value="Awesome!">
        </div>
      </div>
    </div>
  </div>
</div>

<!-- for larger than XS -->
<div class="hidden-xs">
  <button 
          id="popup" 
          ng-style="c.buttonStyle" 
          ng-mouseenter="c.hover(true)" 
          ng-mouseleave="c.hover(false)" 
          class="feedback-button wide" 
          ng-click="c.toggleModalDisplay()">
    <i class="fa fa-comments" aria-hidden="true"></i> FEEDBACK
  </button>
</div>

<!-- for XS -->
<div class="visible-xs">
  <button 
          id="popup" 
          ng-style="c.buttonStyle" 
          class="feedback-button mobile" 
          ng-click="c.toggleModalDisplay()">
    <i class="fa fa-comments" aria-hidden="true"></i> m
  </button>
</div>

Client Script

function($location, $scope, nowAttachmentHandler, $timeout, $rootScope, spUtil, spModal, $log, spAriaUtil) {
	/* widget controller */
	var c = this;

	c.modal = false;
	c.showSuccess = false;

	c.addItem = function(){
		c.data.page = $location.absUrl();
		c.server.update().then(function(response){
			c.data = {};
			c.showSuccess = true;
		});
	}

	c.toggleModalDisplay = function(){
		c.modal = !c.modal;	
	}

	c.resetModalFlow = function(){
		c.toggleModalDisplay();
		c.showSuccess = false;
	}

	c.hoverStyle = {
		"background-color": c.options.hover_background_color,
		"border-top":"solid 3px" + c.options.hover_border_color,
		"border-left":"solid 3px" + c.options.hover_border_color,
		"border-bottom":"solid 3px" + c.options.hover_border_color,
		"border-right":"none", 
		"color":"white"
	}
	
	c.normalStyle = {
		"background-color": c.options.background_color,
		"border-top":"solid 3px" + c.options.border_color,
		"border-left":"solid 3px" + c.options.border_color,
		"border-bottom":"solid 3px" + c.options.border_color,
		"border-right":"none", 
		"color":"white"
	}
	
	c.buttonStyle = c.normalStyle;
	
	c.hover = function(hover){
		if(hover){
			c.buttonStyle = c.hoverStyle;
		}
		else{
			c.buttonStyle = c.normalStyle;
		}
	}

	// Add assigned to, service, etc.
//hereeeeeeeeeeeeeeeee
	

}

Server Script

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */

	if(!input)
		return;
	var email = "";
	
	if(input.email)
		email = input.email;
	
	var page = "";
	if(input.page)
		page = input.page;
	
	var feedback = new GlideRecord('u_feedback');
	feedback.initialize();
	feedback.short_description = input.short_description;
	feedback.description = input.description + '\nemail:' + email + '\npage:' + page;
	feedback.assignment_group.setDisplayValue('SS-Operations and Support');
	feedback.u_requester = gs.getUserID();
	//here

	
	var isTimeKeeper = page.includes("timekeeper");
	if(isTimeKeeper) {
		feedback.u_service = "bc3f252f947e3d404fc3cd405bf03d07";	
	} else {
		feedback.u_service = "bf95e7ca8423444042e1c865177741e8";
	}
	feedback.insert();
	

})();

Ean Grieve · ‎05-16-2018

You can embed a widget into your feedback widget.

https://docs.servicenow.com/bundle/jakarta-servicenow-platform/page/build/service-portal/concept/c_N...

Perhaps start by cloning the OOTB attachment widget and then embedding the widget into your feedback widget. Then get to work changing your cloned widget to be more to your liking (perhaps a little more compact if it is to be an embedded widget).

Kedharnadh · ‎05-24-2021

Hi SNnewbie,

Did you got solution to this issue?