Add an image field to a record page

Example. Add an image field to the page of the knowledge base article. Use the image provided below.

1. Create a replacing object schema 

1. Go to the Configuration section and select a custom package to add the schema.

2. Click Add → Replacing object on the section list toolbar.

   

3. Fill out the schema properties.

   • Set Code to "KnowledgeBase."
   • Set Title to "Knowledge base article."
   • Select "KnowledgeBase" in the Parent object property.
   

4. Add a column to the schema.

   1. Click in the context menu of the object structure's Columns node.

   2. Click Other → Image Link in the drop-down menu.

      

   3. Fill out the properties of the added column.

      • Set Code to "UsrLogo."
      • Set Title to "Knowledge base article logo."
      
5. Click Save then Publish on the Object Designer's toolbar.

2. Create a replacing view model schema of the page of the knowledge base article 

1. Go to the Configuration section and select a custom package to add the schema.

2. Click Add → Replacing view model on the section list toolbar.

   

3. Fill out the schema properties.

   • Set Code to "KnowledgeBasePageV2."
   • Set Title to "Knowledge base edit page."
   • Select "KnowledgeBasePageV2" in the Parent object property.
   

4. Add an image.

   1. Click the button in the context menu of the Images node.

   2. Fill out the image properties.

      • Set Code to "DefaultLogo."
      • Specify the image field in the Image property.
      
   3. Click Add to add the image.
5. Add the KnowledgeBasePageV2Resources and ConfigurationConstants modules as dependencies to the declaration of the view model class.

6. Set up the image field layout.

   Place the image field at the top of the page of the knowledge base article. If you add an image field, the layout of base page fields can break. To avoid this, change the layout of existing fields at the top of the page besides placing the image field there. These are Name, Type, Modified By fields.

   1. Implement the following methods in the methods property:

      • getPhotoSrcMethod(). Receives the image by link
      • beforePhotoFileSelected(). Called before the image selection box opens.
      • onPhotoChange. Called upon the image change.
      • onPhotoUploaded(). Saves the link to the changed image in the object column
   2. Add a configuration object with the settings that determine the layout of the image field and existing page fields to the diff array of modifications. Use the auxiliary PhotoContainer wrapper container that has the "image-edit-container" class to add an image field to the page.

   View the source code of the replacing view model schema of the page of the knowledge base article below.

   KnowledgeBasePageV2

   define("KnowledgeBasePageV2", ["KnowledgeBasePageV2Resources", "ConfigurationConstants"], function(resources, ConfigurationConstants) {
       return {
           /* The name of the record page object's schema. */
           entitySchemaName: "KnowledgeBase",
           /* The methods of the section page's view model. */
           methods: {
               /* Call before the image selection box opens. */
               beforePhotoFileSelected: function() {
                   return true;
               },
               /* Receive the image by link. */
               getPhotoSrcMethod: function() {
                   /* Receive the image link from the object column. */
                   var imageColumnValue = this.get("UsrLogo");
                   /* If the link is specified, return the image file URL. */
                   if (imageColumnValue) {
                       return this.getSchemaImageUrl(imageColumnValue);
                   }
                   /* If the link is not specified, return the default image. */
                   return this.Terrasoft.ImageUrlBuilder.getUrl(this.get("Resources.Images.DefaultLogo"));
               },
               /* Handle the image change. 
   			photo is the image file. */
               onPhotoChange: function(photo) {
                   if (!photo) {
                       this.set("UsrLogo", null);
                       return;
                   }
                   /* Upload the file to the database. Call onPhotoUploaded once the upload finishes. */
                   this.Terrasoft.ImageApi.upload({
                       file: photo,
                       onComplete: this.onPhotoUploaded,
                       onError: this.Terrasoft.emptyFn,
                       scope: this
                   });
               },
               /* Save the link to the changed image. 
   			imageId is the ID of the file saved in the database. */
               onPhotoUploaded: function(imageId) {
                   var imageData = {
                       value: imageId,
                       displayValue: "Image"
                   };
                   /* Assign the image link to the image column. */
                   this.set("UsrLogo", imageData);
               }
           },
           /* Display the field on the section page. */
           diff: /**SCHEMA_DIFF*/[
               /* The metadata to add the custom image field to the record page. */
               {
                   /* Add the element to the page. */
                   "operation": "insert",
                   /* The meta name of the parent container to add the field. */
                   "parentName": "Header",
                   /* Add the image to the parent element's collection of elements. */
                   "propertyName": "items",
                   /* The meta name of the image to add. */
                   "name": "PhotoContainer",
                   /* The properties to pass to the element's constructor. */
                   "values": {
                       /* Set the type of the added element to "container." */
                       "itemType": Terrasoft.ViewItemType.CONTAINER,
                       /* The name of the CSS class. */
                       "wrapClass": ["image-edit-container"],
                       /* Set up the image layout. */
                       "layout": { 
                           /* The column number. */
                           "column": 0, 
                           /* The row number. */
                           "row": 0, 
                           /* The row span. */
                           "rowSpan": 3, 
                           /* The column span. */
                           "colSpan": 3 
                       },
                       /* The array of nested elements. */
                       "items": []
                   }
               },
               /* The [UsrLogo] field contains the account logo. */
               {
                   "operation": "insert",
                   "parentName": "PhotoContainer",
                   "propertyName": "items",
                   "name": "UsrLogo",
                   "values": {
                       /* The method that retrieves the image by link. */
                       "getSrcMethod": "getPhotoSrcMethod",
                       /* The method that is called upon the image change. */
                       "onPhotoChange": "onPhotoChange",
                       /* The method that is called before the image selection box opens. */
                       "beforeFileSelected": "beforePhotoFileSelected",
                       /* The property that flags the image as editable. */
                       "readonly": false,
                       /* The view generator of the control. */
                       "generator": "ImageCustomGeneratorV2.generateCustomImageControl"
                   }
               },
               /* Change the layout of the [Name] field. */
               {
                   /* Execute the operation that modifies the existing element. */
                   "operation": "merge",
                   "name": "Name",
                   "parentName": "Header",
                   "propertyName": "items",
                   "values": {
                       "bindTo": "Name",
                       "layout": {
                           "column": 3,
                           "row": 0,
                           "colSpan": 20
                       }
                   }
               },
               /* Change the layout of the [ModifiedBy] field. */
               {
                   "operation": "merge",
                   "name": "ModifiedBy",
                   "parentName": "Header",
                   "propertyName": "items",
                   "values": {
                       "bindTo": "ModifiedBy",
                       "layout": {
                           "column": 3,
                           "row": 2,
                           "colSpan": 20
                       }
                   }
               },
               /* Change the layout of the [Type] field. */
               {
                   "operation": "merge",
                   "name": "Type",
                   "parentName": "Header",
                   "propertyName": "items",
                   "values": {
                       "bindTo": "Type",
                       "layout": {
                           "column": 3,
                           "row": 1,
                           "colSpan": 20
                       },
                       "contentType": Terrasoft.ContentType.ENUM
                   }
               }
           ]/**SCHEMA_DIFF*/
       };
   });
   

7. Click Save on the Designer's toolbar.

Outcome of the example 

To view the outcome of the example, refresh the Knowledge base section page.

As a result, Creatio will add an image field to the page of the knowledge base article. You can change or delete the image.