How Do I Change the Logo in an eForm Header?

To change a logo in an eForm header, do the procedure in this topic.

Figure: Form JavaScript screen

Form JavaScript screen

Prerequisites

  • The height of the logo can not be more than 35 px, and the width can not be more than 160 px.

Good to Know

How to Start

  1. On the Application Explorer screen, do one of these:
  2. On the eForm Builder screen, click JavaScript JavaScript icon.

Procedure

  1. Add a JavaScript method to show the logo image to the eForm:
    1. On the Form JavaScript screen, enter your Javascript code to change the logo.

      Format:

      function function_name()
        {  
          var headerContent = "[The path of your logo image]"; 
          var params = { value : headerContent };
          eFormHelper.setFormHeader(params, function(result)
          {
            console.log(result);
          })
      }

      Example:

      function setFormHeader()
        {  
          var headerContent = "<img src='http://localhost/banner.png'/>"; 
          var params = { value : headerContent };
          eFormHelper.setFormHeader(params, function(result)
          {
            console.log(result);
          })
      }
  2. Create a rule to run your JavaScript:
    1. On the eForm Builder screen, click Rules Rules icon > Rule Builder Rule Builder icon.
    2. On the Rule Builder screen, in the Then field, drag the Execute Script action.
    3. In the text box, enter your method name.

      Example:

      setFormHeader()

  3. (Optional) Configure CSS style for your logo image:
    1. On the eForm Builder screen, click CSS CSS icon.
    2. On the Form CSS screen, enter your CSS code as necessary, without headers.

      Format:

      $("#imgLogo").css({"propertyname":"value","propertyname":"value",...});

      Example:

      $("#imgLogo").css({"width": "200%", "height": "30px"});