I need help formatting option text in the Ticket Fields widget

JohnScarlata · ‎03-02-2020

Im trying to modify the output of the ticket fields widget so that the content is not in onle long narrow column. We have a number of end users that are new to the platform and are having trouble with this form. When the details of a ticket come out in the long narrow column, some poeple complain that they cant find the order details. others are screen printing, dont ask me why, and it comes out in multiple pages. I'm able to reformat the ticket page to display the ticket fields widget under the ticket conversations widget, and i can make it a wide column, but the data is still coming out in a single long column...pic attached.

caveat - i am not a developer so i need some help in how to modify this widget to display the text in a wider array so that its one page and not a long skinny column..

vkachineni · ‎03-02-2020

//Try this HTML. See the comments.

<div ng-if="data.canRead" class="panel b">
    <div class="panel-heading bg-primary panel-la-jolla-default">
        <div ng-init="spSearch.targetRequests()">
            <sp-c-link target="form" table="data.table" id="data.sys_id" />
        </div>
        <h2 class="sr-only">${Ticket details}</h2>
        <span ng-if="data.agent">
            ${Agent working on this {{data.tableLabel}}}:
            <div>{{data.agent}}</div>
        </span>
        <span ng-if="!data.agent && data.agentPossible">${Your request has been submitted}</span>
        <span ng-if="!data.agentPossible">${{{data.tableLabel}} record details}</span>
    </div>

    <div class="panel-body">
        <dl class="ticket-fields" ng-if="data.fields.length > 0">
            <dt class="col-md-6 col-sm-12 col-xs-6 break-word" ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)" ng-repeat-start="field in data.fields">{{field.label}}</dt>
            <dd class="col-md-6 col-sm-12 col-xs-6 break-word" ng-repeat-end ng-switch="field.type" ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)">
                <div ng-switch-when="glide_date_time" title="{{field.display_value}}">
                    <sn-time-ago timestamp="::field.value" />
                </div>
                <div ng-switch-default>{{field.display_value}}</div>
            </dd>
        </dl>
        <div ng-if="data.variables.length > 0" ng-init="c.variable_toggle = true">
            <button class="h4 options-btn" ng-click="c.variable_toggle = !c.variable_toggle" aria-expanded="{{c.variable_toggle}}" aria-controls="variables-toggle">
                <span style="font-size: 12px;" class="glyphicon" ng-class="c.variable_toggle ? 'glyphicon-chevron-down' : 'glyphicon-chevron-up'"></span>
                ${Options}
            </button>

            <div ng-if="c.variable_toggle" id="variables-toggle" aria-hidden="{{!c.variable_toggle}}">
                <hr role="presentation">
				
				<!-- Trying to reformat variables start-->
				<div class="row">
				  <div ng-repeat-start="variable in data.variables | filter:{visible_summary:true}" class="col-md-4">
					<label class="m-n">{{variable.label}}</label>
                    <div>{{variable.display_value}}</div>
				  </div>
				  <div ng-repeat-end ng-if="$index % 3 == 0" class="clearfix"></div>
				</div>
				<!-- Trying to reformat variables end-->
				
            </div>
        </div>
    </div>

    <div ng-if="data.agentPossible && !data.agent && options.pickup_msg" class="panel-footer">
        <div id="ticket_fields_footer" class="text-center text-muted" style="font-style: italic;" ng-bind-html="data.pickupMsg">
        </div>
    </div>

</div>

Please mark Correct and click the Thumb up if my answer helps you resolve your issue. Thanks!
Vinod Kumar Kachineni
Community Rising Star 2022

View solution in original post

JohnScarlata · ‎03-09-2020

thank you Allen, this is good feedback

i marked the correct answer

JohnScarlata · ‎04-27-2020

Coming back to this because my team now wants to implement this in our environment and i wanted to find out the best practice for doing this.

all of these would use update sets...:)

should i simply update the existing form in the portal w the new widget and layout?

should i rename the existing form to ticket_old and name the form i create Ticket?

is there another way that this should be done?