Adding and Removing the Profile Picture in the Application

Canvas provides you the flexibility to add and remove your profile picture in your end application. By making use of simple configuration methods, you can easily upload or remove the profile picture in your end application.

To upload and remove the profile picture in your end application, perform the following steps:

1. Log on to the end application using your credentials.
   
   
   
   
   
2. Click the User Profile icon on the page.
   
   
   
   

3. Select the Click to Change Profile Picture option to upload the profile picture of your choice.

   For the custom application layouts, you must specify the additional option of editing the profile picture in the JS listener file of your custom application layout, as shown in the following sample code snippet. For detailed information on creating custom application layouts, refer Custom Application Layout.

   $(this.parentElem).find('[data-item-id=ct_picedit]').on('click', function() {
               var addlnoptions = [];
               if($('[data-item-id=ct_picedit]').attr('id') == 'user-image')
                   addlnoptions.push('remove');
               ct.editProfilePicture(addlnoptions);
     });
    $(this.parentElem).find('[data-item-id=ct_picedit]').on("error", function() {
             $('[data-item-id=ct_picedit]').removeAttr('id');
      });

   
   
   
   

4. Click the Choose File option and select the profile picture of your choice from your local drive.
   
   
   
   
   1. Proceed to click Ok to upload the selected profile picture, e.g. Profile Pic.
      
      
   
   
   A confirmation message, indicating a successful upload of the profile picture, appears.
   
   
   
   
   
5. Click Ok.
   
   Once you upload the profile picture of your choice, the uploaded profile picture appears, as shown in the following screen shot.
   
   
   
   
6. To change or remove the existing profile picture, click the Change Profile Pic or the existing profile picture.
   
   
   
   
7. Click the Remove icon to remove your existing profile picture.
   
   
   
   Once you remove the existing profile picture, you can select another picture of your choice from your local drive by making use of the Choose File option.