Display HTML fields in Additional Details Tab when Request is Submitted

[Reddy Sekhar]

Hi Everyone,

I have a requirement to display HTML fields in Additional Details Tab whenever a request is submitted, as per my analysis ServiceNow is excluding HTML fields to be visible on Request Details so i have made slight changes to include HTML field as well, now the content is getting displayed but i am facing issue in fitting the image into the container if the image is big then its not fitting exactly into that tab its overflown..

Please find below details  and images for your reference.

Can someone help me on this issue.

OOTB Widget Name : Variable Summarizer

Added this line of code to OOTB HTML Code -  " <span ng-switch-when="23" ng-bind-html= "::variable.display_value"></span>  "

Few lines of existing HTML Code with extra line i have added: 

<div ng-if="!variable.multi_row">

        <div ng-switch="variable.type">

          <!-- 27 is type URL, 33 is type Attachment -->

          <span ng-switch-when="23" ng-bind-html= "::variable.display_value"></span>

          <a ng-switch-when="27" class="pre-wrap" title="{{::variable.label}}" href="{{::variable.display_value}}" target="_blank">{{::variable.display_value}}</a>

          <span ng-switch-when="33" class="file-attachment">

          <a ng-if="::variable.state != 'not_available'" class="pre-wrap" title="{{::variable.label}}" href="javascript&colon;void(0);" ng-click="scanAttachment(variable)" aria-label="${Download {{variable.display_value}}}">{{::variable.display_value}}</a>

            <span ng-if="::variable.state == 'not_available'" class="error">

<a class="pre-wrap" title="{{::variable.label}}" href="javascript&colon;void(0);" ng-click="scanAttachment(variable)" aria-label="${File {{variable.display_value}} failed security scan}">{{::variable.display_value}}</a>

              (${File failed security scan})

            </span>

          </span>

          <span ng-switch-default class="pre-wrap">{{::variable.display_value}}</span>

        </div>

      </div>

Existing Client Script :

(function() {

    data.label = options.label || gs.getMessage("Options");

    if (options.task)

        data.ariaLabel = gs.getMessage("{0} for {1}", [data.label, options.task]);

    else

        data.ariaLabel = data.label;

    if (options.variables) {

        data.variables = filterVariables(options.variables);

        return;

    }

    data.labelClose = gs.getMessage("Close");

    var tableName = options.table || $sp.getParameter('table');

    var sysId = options.sys_id || $sp.getParameter('sys_id');

    var record = sn_std_tkt_api.TicketConfig.getTicketRecord(tableName, sysId);

    if (record == null)

        return;

    data.canRead = record.canRead();

    if (!data.canRead)

        return;

    data.variables = filterVariables(new GlobalServiceCatalogUtil().getVariablesForTask(record, true));

})();

function filterVariables(variables) {

    if (variables == null || variables.length == 0)

        return variables;

    var filteredVariables = [];

    variables.forEach(function(variable) {

        if (variable.visible_summary) 

            filteredVariables.push(variable);

    });

    return filteredVariables;

}

 Added these lines to OOTB Client Script  -  

else if (variable.type == "23") {

            filteredVariables.push(variable);

        }

Changed Client Script :

(function() {

    data.label = options.label || gs.getMessage("Options");

    if (options.task)

        data.ariaLabel = gs.getMessage("{0} for {1}", [data.label, options.task]);

    else

        data.ariaLabel = data.label;

    if (options.variables) {

        data.variables = filterVariables(options.variables);

        return;

    }

    data.labelClose = gs.getMessage("Close");

    var tableName = options.table || $sp.getParameter('table');

    var sysId = options.sys_id || $sp.getParameter('sys_id');

    var record = sn_std_tkt_api.TicketConfig.getTicketRecord(tableName, sysId);

    if (record == null)

        return;

    data.canRead = record.canRead();

    if (!data.canRead)

        return;

    data.variables = filterVariables(new GlobalServiceCatalogUtil().getVariablesForTask(record, true));

})();

function filterVariables(variables) {

    if (variables == null || variables.length == 0)

        return variables;

    var filteredVariables = [];

    variables.forEach(function(variable) {

        if (variable.visible_summary) {

            filteredVariables.push(variable);

        } else if (variable.type == "23") {

            filteredVariables.push(variable);

        }

    });

    return filteredVariables;

}

@Ankur Bawiskar @Chuck Tomasi @Earl Duque @Pranav Bhagat  can you please help me on this!!!

[Ratnakar7]

Hi @Reddy Sekhar ,

The challenge seems to be related to the overflow of images that are too large for the container.

Here are a few suggestions to address the issue:

1. Image Size Limitation: Ensure that the images uploaded as HTML content are appropriately sized. If the images are too large, consider optimizing them or restricting the size allowed in the system.

2. CSS Styling: Apply CSS styling to the HTML container to control the size and overflow behavior of the images. You can set a maximum height, width, or use other CSS properties to handle the display.

   .your-html-container {
     max-width: 100%;
     max-height: 100%;
     overflow: auto;
   }
   

   Adjust the class name (.your-html-container) to match the actual class or container element.
3. Responsive Images: Make sure that the images are responsive to different screen sizes. This can be achieved by using responsive design techniques in your CSS.
4. Check Container Width: Ensure that the container element where the HTML content is displayed has sufficient width to accommodate the images. If the container is too narrow, it might cause overflow.
5. Image Compression: If the images are in a format that supports compression (e.g., JPEG), consider compressing them to reduce file size.
6. Inspect Elements: Use browser developer tools (right-click on the webpage and select "Inspect" or "Inspect Element") to inspect the HTML and CSS of the rendered content. This can help identify any additional styles or elements affecting the display.

Thanks,

Ratnakar

[Ankur Bawiskar]

@Reddy Sekhar 

I won't recommend this much customization.

[Reddy Sekhar]

Hi Ankur

i have added only one line of code in HTML - "<span ng-switch-when="23" ng-bind-html= "::variable.display_value"></span>"

added 3 lines of code to server Script to include HTML field as well to variables list

else if (variable.type == "23") {

            filteredVariables.push(variable);

        }

if the size of the image is small then it fits perfectly if size is big then its overflown from the container.

please let me know your thoughts on this!!