Customisation of Login Page in vDesigner 1

How can we customise the login page of vDesigner 1?

While configuring login page I am getting the same sort of template all the times. How can I customise that?

1 Like

We have a Default Login Templates while downloading a build. We have 5 templates for that.

But if you want to cutomize your login Page:

Go to downloads section , Click on Flutter
In application properties you have login properties Text box, where you can pass JSON in which you described all the requirements, what you need to be in Login screen.
(For ex: change colour of submit button, Change the font family of username and password field, etc).

Json for Customization Login Screen:

{
  "LOGIN_RELOGIN_DETAILS": {
    "TYPE": "OTP/PASSWORD/SAML",
    "BUTTONS": [
      {
        "TEXT": "Login With Adfs",
        "RELOGIN_TEXT": "Continue With Adfs",
        "TYPE": "SAML",
        "DETAILS": {
          "SERVICE_NAME": "",
          "URL":,
          "SUCCESS_URL": ,
          "FAILURE_URL": "",
          "USERNAME_PARAM": "loginId",
          "PASSWORD_PARAM": "sso_token",
          "SINGLE_USER_MSG_CODE": "123"
        }
      },
      {
        "TEXT": "Login With Password",
        "RELOGIN_TEXT": "Continue With Password",
        "TYPE": "PASSWORD",
        "DETAILS": {
          "SERVICE_NAME": "",
          "URL": "",
          "SUCCESS_URL": "",
          "FAILURE_URL": ""
        }
      }
    ],
    "SHOW_OFFLINE_LOGIN_DIALOG": "Y",
    "PROCEED_ON_BIOMETRIC_ERROR": "",
    "WIPE_DATA_ON_USER_CHANGE": "N",
    "LOGO_POSITION": "TOP"
  },
  "PRE_SPLASH_SCREEN": {
    "DEFAULT_BcACKGROUND_IMAGE_URL": [
      "tutorial_1.png"
    ],
    "DEFAULT_LOGO_URL": "",
    "DEFAULT_BG_COLOR": "#666666",
    "CAROUSEL_FRQ": "10",
    "CAROUSEL_SHOW_TYPE": "FIRST_LOGIN",
    "SHOW_PROCEED_BUTTON": "Y",
    "PROCEED_BUTTON_LABEL": "GET STARTED",
    "PROCEED_BUTTON_BG_COLOR": "#3e5ac6",
    "PROCEED_BUTTON_TEXT_COLOR": "#ffffff"
  },
  "POST_SPLASH_SCREEN": {
    "DEFAULT_BACKGROUND_IMAGE_URL": [
      "splash_loader.gif"
    ],
    "POST_SPLASH_VISIBILITY_RULE_ID": "$.USER_SESSION_OBJECT.USER.USER_STATUS=INVITE",
    "DEFAULT_LOGO_URL": "",
    "DEFAULT_MESSAGE": "Please wait while we are fetching details...",
    "DEFAULT_BG_COLOR": "#ffffff",
    "CAROUSEL_FRQ": "5"
  },
  "LOGIN_SCREEN": {
    "BACKGROUND_IMAGE_URL": "",
    "BACLGROUND_COLOR": "",
    "LOGO_URL": "",
    "HEADING": "Welcome ",
    "SUB_HEADING": "Please enter your user id",
    "SHOW_USERID_TEXTFIELD": "Y",
    "HEADING_FONT_SIZE": "24",
    "SUB_HEADING_FONT_SIZE": "16",
    "USER_ID_LABEL": "",
    "USER_ID_MANDATORY_MSG": "0",
    "USER_ID_REGEX_MSG": "",
    "RESGISTRATION_SCHEME": "POST",
    "REGISTER_SIGN_UP_LABEL": "Registration",
    "DEFAULT_REGEX": "",
    "MAX_LNGTH": "10",
    "DEFAULT_COUNTY_CODE": "",
    "COUNTRY_CODE_EDITABLE": "N",
    "COUNTRY_CODE_SERVICE_NAME": "",
    "OTPGENERATE_SERVICE": "",
    "USERNAME_INPUT_TYPE": "U",
    "LOGIN_BUTTON_TEXT": "Generate / Continue MPIN"
  },
  "OTP_SCREEN": {
    "BACKGROUND_IMAGE_URL": "",
    "BACLGROUND_COLOR": "",
    "LOGO_URL": "",
    "HEADING": "",
    "SUB_HEADING": "",
    "HEADING_FONT_SIZE": "24",
    "SUB_HEADING_FONT_SIZE": "16",
    "OTP_LENGTH": "6",
    "RESEND_TIMER": "90",
    "PHONE_LOCK_PATTERN": "DEFAULT/USER_INPUT",
    "RESEND_TEXT": "Resend Otp"
  },
  "POSTLOGIN_REGISTER_SCREEN": {
    "FORM_ID": "214524",
    "FORM_VISIBILITY_RULE_ID": ""
  },
  
  "MSG_MASTER": [
    {
      "CODE": "1",
      "VALUE": "Please enter user id"
    },
    {
      "CODE": "2",
      "VALUE": "Please enter valid 10 digit mobile number"
    },
    {
      "CODE": "123",
      "VALUE": "Only Single User Allowed"
    }
  ]
}
1 Like

If would be of great help if you can edit you answer and add Login Template