Implement an Attachments detail

Level: advanced

Example

Add the Photos attachment detail of the Attachments type to the record page of the Photos custom section.

1. Create a custom section

1. Create a custom package and set it as the current package. Learn more in a separate article: Packages basics.

2. Click to open the System Designer.

3. Go to the System setup block → Section wizard.

4. Fill out the section properties:

   • Set Title to "Photos."
   • Set Code to "UsrPhotos."
   • Set Workplace to "Sales."

   

5. Click Save on the Section Wizard's toolbar.

As a result:

• Creatio will display the Photos custom section in the Sales workplace.

  

• Creatio will add the schemas of the Photos section to the configuration.

  

2. Create a custom detail

1. Click to open the System Designer.

2. Go to the System setup block → Detail wizard.

3. Fill out the detail properties:

   • Set Title to "Photos attachment."
   • Set How to create detail? to "Based on existing object."
   • Set Object to "Photos attachment."

   

4. Click Save on the Detail Wizard's toolbar.

As a result, Creatio will add the following schemas to the configuration:

• The UsrSchemae9733d1bDetail schema of the Photos attachments detail's view model.
• The UsrUsrPhotosFiled6a229baPage schema of the Photos attachments detail's record page.

3. Set up the custom detail

1. Go to the Configuration section and select a custom package to set as current.

2. Open the UsrUsrPhotosFiled6a229baPage schema of the Photos attachments detail's record page.

3. Click the button on the properties panel and specify FileDetailV2 in the Parent object field. The FileDetailV2 schema of the UIv2 package implements the Attachments detail. By default, the parent object in the Detail Wizard is the base detail schema that contains the list.

   

4. Click Apply to apply the properties.

5. Click Save on the Designer's toolbar.

4. Add the detail to the section

1. Go to the Photos section.

2. Click View → Open section wizard on the toolbar.

3. Go to the Section pages block → the Edit page button.

4. Click New detail in the Section Wizard workspace.

5. Fill out the detail parameters.

   • Set Detail to "Photos attachment." Creatio will populate the Title and Code fields.
   • Set Title to "Photos attachment."

   

6. Click Save → Section wizard → Save.

As a result, Creatio will add the Photos attachment detail to the record page of the Photos section.

5. Add custom detail styles

The view model schema of the detail page does not support visual styles. As such, take the following steps to add styles:

1. Create a module schema. Define the styles in it.
2. Add the style module to the dependencies of the detail module.

1. Create a module schema

1. Go to the Configuration section and select a custom package to set as the current package.

2. Click Add → Module on the section list toolbar.

   

3. Fill out the following schema properties:

   • Set Code to "UsrSchemaDetailCSS."
   • Set Title to "SchemaDetailCSS."

   

   Click Apply to apply the properties.

4. Go to the LESS node of the object structure and set up the needed visual styles of the detail.

   Set up the visual styles of the detail

   div[id*="UsrSchemae9733d1bDetail"] {
       .grid-status-message-empty {
           display: none;
       }
       .grid-empty > .grid-bottom-spinner-space {
           height: 5px;
       }
       .dropzone {
           height: 35px;
           width: 100%;
           border: 1px dashed #999999;
           text-align: center;
           line-height: 35px;
       }
       .dropzone-hover {
           border: 1px dashed #4b7fc7;
       }
       .DragAndDropLabel {
           font-size: 1.8em;
           color: rgb(110, 110, 112);
       }
   }
   
   div[data-item-marker*="added-detail"] {
       div[data-item-marker*="tiled"], div[data-item-marker*="listed"] {
           .entity-image-class {
               width: 165px;
           }
           .entity-image-container-class {
               float: right;
               width: 128px;
               height: 128px;
               text-align: center;
               line-height: 128px;
           }
           .entity-image-view-class {
               max-width: 128px;
               max-height: 128px;
               vertical-align: middle;
           }
           .images-list-class {
               min-height: 0.5em;
           }
           .images-list-class > .selectable {
               margin-right: 10px;
               display: inline-block;
           }
           .entity-label {
               display: block;
               max-width: 128px;
               margin-bottom: 10px;
               text-align: center;
           }
           .entity-link-container-class > a {
               font-size: 1.4em;
               line-height: 1.5em;
               display: block;
               max-width: 128px;
               margin-bottom: 10px;
               color: #444;
               text-decoration: none;
               text-overflow: ellipsis;
               overflow: hidden;
               white-space: nowrap;
           }
           .entity-link-container-class > a:hover {
               color: #0e84cf;
           }
           .entity-link-container-class {
               float: right;
               width: 128px;
               text-align: center;
           }
           .select-entity-container-class {
               float: left;
               width: 2em;
           }
           .listed-mode-button {
               border-top-right-radius: 1px;
               border-bottom-right-radius: 1px;
           }
           .tiled-mode-button {
               border-top-left-radius: 1px;
               border-bottom-left-radius: 1px;
           } 
           .tiled-mode-button, .listed-mode-button {
               padding-left: 0.308em;
               padding-right: 0.462em;
           }
       }
       .button-pressed {
           background: #fff;
           
           .t-btn-image {
               background-position: 0 16px !important;
           }
       }
       div[data-item-marker*="tiled"] {
           .tiled-mode-button {
               .button-pressed;
           }
       }
       div[data-item-marker*="listed"] {
           .listed-mode-button {
               .button-pressed;
           }
       }
   }

5. Click Save on the Designer's toolbar.

2. Modify the view model schema of a detail

To use the module and its styles in the detail schema:

1. Open the UsrSchemae9733d1bDetail schema of the Photos attachment detail's view model.

2. Add the UsrSchemaDetailCSS module to the dependencies of the UsrSchemae9733d1bDetail schema.

   View the source code of the modified schema below.

   UsrSchemae9733d1bDetail

   define("UsrSchemae9733d1bDetail", ["css!UsrSchemaDetailCSS"], function() {
       return {
           entitySchemaName: "UsrPhotosFile",
           details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
           methods: {},
           diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/
       };
   });

3. Click Save on the Designer's toolbar.

Outcome of the example

As a result, Creatio will add the Photos attachment detail to the record page of the Photos custom section.

---

Resources

Package with example implementation