Here is the factory code for the Access Detail page for the Customer Hub. If you would like to use this code on your page, you can hit the red “Revert” button on your page. If you do not see the “Revert” button, that means your code is up to date.

If you have customized your code and would like to compare it with the factory code below, we recommend using a text compare tool such as DiffNow.

 <ncy-breadcrumb></ncy-breadcrumb>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
    <div class="well well-sm ticket-fields">
        <div>
            <label>Name</label><br />
            <p>{{(Ticket.Ticket.Name) || "-" }}</p>
        </div>
        <div>
            <label>Number</label><br />
            <p>{{(Ticket.Ticket.TicketNumber) || "-" }}</p>
        </div>
        <div>
            <label>Type</label><br />
            <p>{{(Ticket.Ticket.TicketTypeName) || "-" }}</p>
        </div>
        <div>
            <label>Status</label><br />
            <p>{{(Ticket.Ticket.Status) || "-" }}</p>
        </div>
        <div>
            <label>Severity</label><br />
            <p>{{(Ticket.Ticket.Severity) || "-" }}</p>
        </div>
        <div ng-show="settings.Features.EnableTicketGroupSelection">
            <label>Group</label><br />
            <p>{{(Ticket.Ticket.GroupName) || "-" }}</p>
        </div>
        <div ng-show="settings.Features.EnableTicketProductSelection">
            <label>Product</label><br />
            <p>{{(Ticket.Ticket.ProductName) || "-" }}</p>
        </div>
        <div ng-show="settings.Features.EnableTicketProductVersionSelection">
            <label>Version</label><br />
            <p>{{(Ticket.Ticket.ReportedVersion) || "-" }}</p>
        </div>
        <div>
            <label>Assigned To</label><br />
            <p>{{(Ticket.Ticket.UserName) || "-" }}</p>
        </div>
        <div>
            <label>Contacts <i class="fa fa-plus-circle" ng-click="toggleContactModal()"></i></label><br />
            <p>{{(Ticket.Ticket.Contacts) || "-" }}</p>
        </div>
        <div>
            <label>Created</label><br />
            <span ng-bind="Ticket.Ticket.DateCreated | date:'MM/dd/yyyy hh:mm:ss a'"></span>
        </div>
        <div>
            <label>Last Updated</label><br />
            <span ng-bind="Ticket.Ticket.DateModified | date:'MM/dd/yyyy hh:mm:ss a'"></span>
        </div>
        <div ng-repeat="CustomField in Ticket.CustomValues | filter: hasValue | orderBy:'Position' ">
            <label>{{CustomField.Name}}</label><br />
            <p>{{(CustomField.CustomValue) || "-" }}</p>
        </div>
    </div>
</div>

<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 timeline">
	<div class="ticket-controls">
		<button class="btn btn-default" ng-click="toggleModal()">New Comment</button>
		<button type="button" class="btn btn-link" ng-if="!Ticket.Ticket.IsClosed" ng-click="closeTicket()">Close Ticket</button>
	</div>
    <div class="panel panel-default" ng-repeat="Action in Ticket.Actions | orderBy:'DateCreated':true">
        <div class="panel-body" >
            <blockquote ng-bind-html="Action.Action.Description"></blockquote>
            <div class="ticket-attachments">
                <a ng-repeat="f in Action.Attachments" ng-click="downloadFile(f)"><i class="fa fa-paperclip"></i>{{f.FileName}}</a>
            </div>
            <img class="user-avatar pull-left" src="../../images/blank_avatar.png">
            <strong>{{Action.Action.CreatorName}}</strong><br />
            <em>{{Action.Action.DateCreated | date:'MM/dd/yyyy hh:mm a'}}</em>
        </div>
    </div>
</div>

<modal title="New Comment" id="newComment" visible="showModal">
		<form role="actionForm" ng-submit="AddNewComment(newCommentForm)">
			<div class="form-group">
				<label for="description">Description</label>
				<summernote height="200" ng-model="newCommentForm.Comment" config="options"></summernote>
				<!--<textarea class="form-control" ng-model="newCommentForm.Comment" rows="5" style="resize:vertical;"></textarea>-->
				<!--<input type="email" class="form-control" id="email" placeholder="Enter email" />-->
			</div>
            <div class="row">
                <div screen-recording></div>
            </div>
            <div class="row">
                <div video-recording></div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div ngf-drop="addFiles($files)" ngf-select="addFiles($files)" class="drop-box"
                         ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true" ngf-max-size="20MB">
                        <i class="fa fa-cloud-upload fa-4x" style="color:#3D6DA7"></i><br />
						<label>Drop files here or click to upload</label><br />
						<small>Images can be pasted into the description as well</small><br />
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item" ng-repeat="f in files">{{f.name}}<a ng-click="deleteFile($index)" class="pull-right"><i class="fa fa-trash"></i></a></li>
                    </ul>
                    <div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
                    {{errorMsg}}
                </div>
            </div>
			<div style="text-align:right;">
				<button type="submit" class="btn btn-primary" ng-disabled="commentSubmitting">Submit</button>
			</div>
		</form>
</modal>

<modal title="Add a contact" id="addContact" visible="showContactModal">
	<form name="newContactForm" role="actionForm" ng-submit="AddNewContact(AnonymousContactModel)">
		<div class="col-md-6 col-sm-6 col-xs-6">
			<div class="form-group" ng-class="{ 'has-error': newContactForm.FullName.$touched && newContactForm.FullName.$invalid }">
				<label>First and Last Name</label>
				<input type="text" class="form-control" ng-model="AnonymousContactModel.FullName" name="FullName" pattern="\w+ \w+" required>
				<div class="help-block" ng-messages="newContactForm.FullName.$error" ng-if="newContactForm.FullName.$touched">
					<p ng-message="required">Name is required</p>
					<p ng-message="pattern">Enter valid first and last name</p>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-sm-6 col-xs-6">
			<div class="form-group" ng-class="{ 'has-error': newContactForm.EmailAddress.$touched && newContactForm.EmailAddress.$invalid }">
				<label>Email address</label>
				<input type="text" class="form-control" ng-model="AnonymousContactModel.EmailAddress" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" name="EmailAddress" required>
				<div class="help-block" ng-messages="newContactForm.AnonymousEmail.$error" ng-if="newContactForm.EmailAddress.$touched">
					<p ng-message="required">Email address required</p>
					<p ng-message="pattern">Invalid email address</p>
				</div>
			</div>
		</div>

		<div style="text-align:right;">
			<button type="submit" class="btn btn-primary" ng-disabled="newContactForm.$invalid || commentSubmitting">Submit</button>
		</div>
	</form>
</modal>

<style>
    .ticket-fields > div {
        margin-bottom: 10px;
    }

    .ticket-fields > div > p,
    .ticket-fields > div > span {
        margin-left: 15px;
    }

    .ticket-controls {
        margin-bottom:10px; 
        text-align:right;
    }

    .ticket-attachments {
        margin: 0px 0px 10px 15px;
    }

    a > i.addContact {
        margin-left:5px;
        position:relative;
        top:1px;
        cursor:pointer;
    }

    .user-avatar { 
        margin-right: 10px; 
        width:50px; 
        border-radius:50%;
    }

    .drop-box {
        background: #F8F8F8;
        border: 5px dashed #DDD;
        text-align: center;
        margin: 10px 0px 10px 0px;
        border-radius: 5px;
        font-weight: 400;
        padding:15px;
    }
    .dragover {
        border: 5px dashed #3d6da7;
    }

    .fa-paperclip {
        padding-right: 5px;
        margin-left:5px;
    }
</style>

Need more help with this?
Don’t hesitate to contact us here.

Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.