Sidebar

Using iTop

Creating your iTop

iTop Customization

"How to" examples
DataModel

User Interface

Automation & Ticket management

Portal Customization

Portal - Positioning Attachment in Forms

Since iTop 3.2.1, it is possible to change the position of the Attachments within any portal Form.

How to

Define within the twig of the form, an extra field which will be recognize as the position where to put the Attachments

  <div class="form_field" data-field-id="attachments_plugin" data-field-plugin="AttachmentPlugIn" data-field-opened="true"/> 

Note the data-field-opened=“true” parameter, to force the attachment to be open or closed by default.

Full twig example

Portal
  <module_designs>
    <module_design id="itop-portal">
      <forms>
        <form id="ticket-edit" _delta="must_exist">
          <twig _delta="redefine">
            <div class="row">
              <div class="col-sm-7">
                <fieldset>
                  <legend>{{'Ticket:baseinfo'|dict_s}}</legend>
                  <div class="col-sm-6">
                    <div class="form_field" data-field-id="title" data-field-flags="read_only"/>
                    <div class="form_field" data-field-id="service_id" data-field-flags="read_only"/>
                  </div>
                  <div class="col-sm-6">
                    <div class="form_field" data-field-id="caller_id" data-field-flags="read_only"/>
                    <div class="form_field" data-field-id="servicesubcategory_id" data-field-flags="read_only"/>
                  </div>
                  <div class="col-sm-12">
                    <div class="form_field" data-field-id="description" data-field-flags="read_only"/>
                    <div class="form_field" data-field-id="solution" data-field-flags="read_only"/>
                  </div>
                  <div class="col-sm-6">
                    <div class="form_field" data-field-id="user_satisfaction" data-field-flags="read_only"/>
                  </div>
                  <div class="col-sm-6">
                    <div class="form_field" data-field-id="user_comment" data-field-flags="read_only"/>
                  </div>
                </fieldset>
              </div>
              <div class="col-sm-5">
                <fieldset>
                  <legend>{{'Ticket:Type'|dict_s}} &amp; {{'Ticket:date'|dict_s}}</legend>
                  <div class="col-sm-6">
                    <div class="form_field" data-field-id="status" data-field-flags="read_only"/>
                    <div class="form_field" data-field-id="impact" data-field-flags="read_only"/>
                    <div class="form_field" data-field-id="urgency" data-field-flags="read_only"/>
                    <div class="form_field" data-field-id="priority" data-field-flags="read_only"/>
                  </div>
                  <div class="col-sm-6">
                    <div class="form_field" data-field-id="start_date" data-field-flags="read_only"/>
                    <div class="form_field" data-field-id="last_update" data-field-flags="read_only"/>
                    <div class="form_field" data-field-id="resolution_date" data-field-flags="read_only"/>
                    <div class="form_field" data-field-id="agent_id" data-field-flags="read_only"/>
                  </div>
                </fieldset>
              </div>
            </div>
            <div>
           <div class="form_field" data-field-id="attachments_plugin" data-field-plugin="AttachmentPlugIn" data-field-opened="true"/>
              <div class="form_field" data-field-id="contacts_list"/>
              <div class="form_field" data-field-id="public_log"/>
            </div>
          </twig>
        </form>
      </forms>
    </module_design>
  </module_designs>
</itop_design>
latest/customization/portal_howto_move_attachment.txt · Last modified: 2025/10/10 15:21 by 127.0.0.1
Back to top
Contact us