Ticket attributes are missing in the print display

[neoveau]

Title: Ticket attributes are missing in the print display

1. What is your original issue/pain point you want to solve?
   Ticket attributes are not displayed on the print preview, therefore important information can be omitted.

2. Which are one or two concrete situations where this problem hurts the most?
   We use the helpdesk to manage laptop repairs. To keep track of these devices, we print out the ticket to attach to the device, and having the attributes/custom attributes, such as serial number, external reference number, and other fields available on the device makes it significantly easier to manage.

3. Why is it not solvable with the Zammad standard?
   There are no configuration options to enable this feature, and I haven’t found an applicable way to customise the stylesheets. I am currently printing screeenshots of the page in a custom light mode theme using the Dark Reader browser extension to work around this shortcoming.

4. What is your expectation/what do you want to achieve?
   I want the ability to have all relevant information present when printing a ticket.

If there is any more useful information, feel free to share it all (e.g.: mockup screenshots, if something is UI related, or the API URL/documentation URL for a service you need a connection to).

I think maybe a configurable setting would be a good way to implement this. Here is a mockup that I prepared to demonstrate this.

Your Zammad environment:

• Average concurrent agent count: 3
• Average tickets a day: 15
• What roles/people are involved: IT Manager, IT Support

Anything else which you think is useful to understand your use case:
This feature has been suggested as an issue on GitHub.

Ticket attributes are missing in the print display

Thank you for your attention to this matter.

[neoveau]

Custom print preview stylesheet

I figured out a way to customise the print layout in Zammad to include ticket attributes, which allows us to create a more useful printed record of tickets, by using a custom stylesheet.

Setup Instructions

1. Create and edit the custom print stylesheet:

sudo vim /opt/zammad/app/assets/stylesheets/custom/custom_print.scss

2. Add the SCSS code provided below to the file.

/* /opt/zammad/app/assets/stylesheets/custom/custom_print.scss */ 
@media print {
  // Hide unwanted sections and additional sidebars
  .sidebar[data-tab="customer"],
  .sidebar[data-tab="checklist"],
  .sidebar.bottom-form-shadow.flex:not(:first-of-type),
  .sidebar.bottom-form-shadow.flex.hide,
  .tabsSidebar-tabs,
  .attributeBar,
  .article-meta.bottom
  .tags,
  .links,
  .js-avatar,
  .js-linkKbAnswers,
  .js-timeUnit,
  .js-subscriptions {
    display: none !important;
  }

  // Show only the first ticket sidebar
  .tabsSidebar,
  .tabsSidebar--attributeBarSpacer {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }

  // Sidebar container
  .sidebar[data-tab="ticket"]:first-of-type {
    position: static !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    padding: 0.3cm !important;
    margin: 0 !important;
    background: none !important;
    color: black !important;
    box-shadow: none !important;
  }

  // Header styling
  .sidebar-header {
    margin-bottom: 0.2cm !important;
    padding-bottom: 0.2cm !important;
    border-bottom: 1px solid #ccc;

    .sidebar-header-headline {
      color: black;
      margin: 0;
      font-size: 14px;
      font-weight: bold;
    }
  }

  hr {
    margin: 0.2cm 0 !important;
    border-top: 1px solid #ccc;
  }

  // Form content
  .sidebar-content {
    display: block !important;
    width: 100% !important;

    form {
      display: block !important;
      width: 100% !important;

      fieldset {
        display: block !important;
        border: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
      }
    }
  }

  // Compact form groups
  .form-group:not(.hide):not(.is-hidden) {
    display: block !important;
    margin-bottom: 0.2cm !important;
    page-break-inside: avoid;
    width: 100% !important;

    // Labels
    .formGroup-label label {
      display: inline-block !important;
      color: #666;
      font-weight: normal;
      font-size: 12px;
      width: 30% !important;
      margin: 0 !important;
      vertical-align: middle;
    }

    // Form controls
    .controls {
      display: inline-block !important;
      width: 70% !important;
      vertical-align: middle;

      // Select boxes and inputs
      select.form-control,
      input.form-control {
        display: inline-block !important;
        border: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
        background: none;
        color: black;
        font-size: 12px;
        -webkit-appearance: none;
        appearance: none;
      }
    }
  }

  // Hide unnecessary elements
  .sidebar-header-actions,
  .tabsSidebar-close,
  .dropdown-toggle,
  .icon-arrow-down,
  .btn,
  .loading,
  .help-inline,
  .help-block,
  .dropdown,
  .searchableSelect-autocomplete,
  .controls--select svg { 
    display: none !important;
  }

  // Ensure proper layout flow
  .flex {
    display: block !important;
  }

  // Main content area adjustment
  .main {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
  }

  // Reduce Component Padding
  .textBubble {
    padding: 10px;
  }

  .ticket-article-item {
    padding-bottom: 0;
  }
}

3. After saving the file, recompile the assets and restart Zammad:

sudo zammad run rails assets:precompile
sudo zammad restart