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

Allen Andreas · ‎03-03-2020

Yea, great work by that poster above. You should be able to simply bold the labels by changing this line:

<label class="m-n">{{variable.label}}</label>

to

<label class="m-n"><b>{{variable.label}}</b></label>

Please mark reply as Helpful, if applicable. Thanks!

Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!

JohnScarlata · ‎03-03-2020

fantastic, this worked!

Allen Andreas · ‎03-03-2020

Awesome.

If you don't mind, please mark the other posters reply as Correct and mark mine as simply "Helpful".

They definitely did all the work and deserve the Correct answer mark (you can only set one as Correct). But I wouldn't mind if you tagged mine a Helpful 🙂

That way we all get some points.

Thanks!

Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!

JohnScarlata · ‎03-06-2020

the new revised form, thank you all

Allen Andreas · ‎03-06-2020

Awesome! My only 2 cents about that design is that as the ticket goes on and more chatter is had back and forth, that important section of information (number, state, etc.) are going to be pushed down and down and down.

So if you must show all of those fields in a x3 column...you may want to consider placing it above the ticket conversation widget? Just my thoughts.

Don't forget to mark any reply that was Helpful...as Helpful!

And then the Correct answer post...as Correct!

It seems you don't have a Correct answer marked now.

Thanks!

Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!