Ticket attributes are missing in the print display

Feature requests
2

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
  1. 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;
  }
}
  1. After saving the file, recompile the assets and restart Zammad:
sudo zammad run rails assets:precompile
sudo zammad restart
1 Like