Performing a search in a segment using with textbox

//call this function in ontextchange event of textbox
function search(){
  try{

    if(frmCountryCodeList.txtSearch.text !== ""){

      var searchArr = [];

      for(var i = 0; i<gbl_country_code.length; i++){
        if(gbl_country_code[i].lblCountry.toLowerCase().includes(frmCountryCodeList.txtSearch.text.toLowerCase())){
          searchArr.push(gbl_country_code[i]);
        }
      }
      frmCountryCodeList.segCountryCode.setData(searchArr);

    }else{
      frmCountryCodeList.segCountryCode.setData(gbl_country_code);
    }


  }catch(err){
    dialogue("Err "+err);
  }
}

Disabling kony default loader

//call this function in postappinit
function avoidDefaultLoader(){
  try{
    kony.application.setApplicationBehaviors({ "hideDefaultLoadingIndicator":true});
  }catch(err){
    dialogue("Error "+err);
  }
}

Opening gallery and select and set image to an image widget

function gallerImages(){
  var querycontext = {mimetype:"image/*"};
  var Status = kony.phone.openMediaGallery(onselectioncallback, querycontext);

  function onselectioncallback(rawbytes)
  {
    frmProfile.flxCameraGallery.setVisibility(false);
    if(rawbytes !== null){
      base64Str = kony.convertToBase64(rawbytes);
      frmProfile.imgProfile.base64=base64Str;
      frmDashBoard.imgMenuProfile.base64 = base64Str;
    }else{
             alert("Please select image");
    }
  }
}

Getting card number format in textbox

var str, strc;

//call this function in ontextchange
function cardNumberFormat(){
  try{
    if(str !== null && str !== undefined){
      if(frmPaymentMode.txtCardNumber.text.length > str.length){
        if(frmPaymentMode.txtCardNumber.text.length ===4){
          frmPaymentMode.txtCardNumber.text = frmPaymentMode.txtCardNumber.text+" ";
        }else if(frmPaymentMode.txtCardNumber.text.length ===9){
          frmPaymentMode.txtCardNumber.text = frmPaymentMode.txtCardNumber.text+" ";
        }else if(frmPaymentMode.txtCardNumber.text.length ===14){
          frmPaymentMode.txtCardNumber.text = frmPaymentMode.txtCardNumber.text+" ";
        }
      }else{

      }
    }
    str = frmPaymentMode.txtCardNumber.text;

  }catch(err){
    dialogue("Error "+err);
  }
}

Getting current position and displaying in map

function getPosition(){
    var positionoptions = {timeout: 15000};
    frmLocation.mapLocation.zoomLevel=15;
    kony.location.getCurrentPosition(successcallback, errorcallback, positionoptions);
}


function successcallback(position){
  var lat = position.coords.latitude;
  var long = position.coords.longitude; 
  var locationData = [{
           lat: lat,
       lon : long,
       image : "dest.png",
           desc: "your location",
           name: "location"
        }];
//setting current position in map
  frmLocation.mapLocation.locationData = locationData;
  frmLocation.show();
}

function errorcallback(positionerror){
    var errorMesg = "Error code: " + positionerror.code;
    errorMesg = errorMesg  + " message: " + positionerror.message;
    alert(errorMesg);
  frmLocation.show();
}

Internationalization in kony

// for changing default locale
function changeLanguage(){
  try{
    var lang = frmLanguages.sgmLanguages.selectedRowItems[0].lblLanguage;
    alert(lang);
    if(lang === "English"){
      kony.i18n.setDefaultLocaleAsync("en_US", onsuccesscallback, onfailurecallback);
    }else if(lang === "Hindi"){
      kony.i18n.setDefaultLocaleAsync("hi_IN", onsuccesscallback, onfailurecallback);
    }else{
      kony.i18n.setDefaultLocaleAsync("te_IN", onsuccesscallback, onfailurecallback);
    }
  }catch(err){
    dialogue("Error "+err);
  }
}




function onsuccesscallback(oldlocalename, newlocalename){

  alert("success "+oldlocalename +" "+newlocalename);
}

function onfailurecallback(errCode, errMsg){
  alert("failure "+errCode +" "+errMsg);
}

//for dynamically changing text
frmRecharge.headers[0].lblHeader.text = kony.i18n.getLocalizedString("recharge");

Auto scrolling paging segment

function bannerAutoScroll(){
  try{
    kony.timer.schedule("paychargeTimer", changeBanner, 5, true);
  }catch(err){
    dialogue("Error "+err);
  }
}

var banner_count = 0;

function changeBanner(){
  try{

    banner_count+=1;
    if(banner_count > 2){
      banner_count = 0;
      frmDashBoard.segBanner.selectedRowIndex = [0,banner_count];
    }else{
     
      frmDashBoard.segBanner.selectedRowIndex = [0,banner_count];
    }

  }catch(err){
    dialogue("Error "+err);
  }
}

Moving car animation in desktop application

var car_rev = false;

function moveCar(eventobject) {
    function MOVE_ACTION____dfd6b03fc1d949e5ac881fe735e6eccf_Callback() {
      car_rev = !car_rev;
     
      if(car_rev){
        frmCar.imgCar.src = "carleft.gif";
        frmCar.imgCar.height = "60%";
        frmCar.imgCar.animate(
    kony.ui.createAnimation({
        "100": {
            "left": "-30%",
            "stepConfig": {
                "timingFunction": kony.anim.EASE
            }
        }
    }), {
        "delay": 0,
        "iterationCount": 1,
        "fillMode": kony.anim.FILL_MODE_FORWARDS,
        "duration": 10
    }, {
        "animationEnd": MOVE_ACTION____dfd6b03fc1d949e5ac881fe735e6eccf_Callback
    });
      }else{
        frmCar.imgCar.src = "movingcar.gif";
        frmCar.imgCar.height = "30%";
        frmCar.imgCar.animate(
    kony.ui.createAnimation({
        "100": {
            "left": "100%",
            "stepConfig": {
                "timingFunction": kony.anim.EASE
            }
        }
    }), {
        "delay": 0,
        "iterationCount": 1,
        "fillMode": kony.anim.FILL_MODE_FORWARDS,
        "duration": 10
    }, {
        "animationEnd": MOVE_ACTION____dfd6b03fc1d949e5ac881fe735e6eccf_Callback
    });
      }
     
    }
    frmCar.imgCar.animate(
    kony.ui.createAnimation({
        "100": {
            "left": "100%",
            "stepConfig": {
                "timingFunction": kony.anim.EASE
            }
        }
    }), {
        "delay": 0,
        "iterationCount": 1,
        "fillMode": kony.anim.FILL_MODE_FORWARDS,
        "duration": 10
    }, {
        "animationEnd": MOVE_ACTION____dfd6b03fc1d949e5ac881fe735e6eccf_Callback
    });
}

Moving a button according to tap or finger movement

//setting pan and tap gesture to the man flex
function setGest(){
  var tapdata = {fingers:1,taps:1};
var pandata = {fingers: 1, continuousEvents: true};

frmGesture.flxMain.addGestureRecognizer(1, tapdata, gestureFunc);
frmGesture.flxMain.addGestureRecognizer(4, pandata, gestureFunc);
}

//moving button position in the callback
function gestureFunc(widgetRef, gestureInfo, context){
  try{

   
    if(gestureInfo.gestureType === 1 || gestureInfo.gestureType === "1" ){
      frmGesture.btn.left = gestureInfo.gestureX * 2/3;
      frmGesture.btn.top = gestureInfo.gestureY * 2/3;
    }else{
        frmGesture.btn.left = gestureInfo.gestureX * 2/3;
      frmGesture.btn.top = gestureInfo.gestureY * 2/3;
    }
  }catch(err){
    alert("Error "+err);
  }
}

Dynamic setting section data and expand or collapse on click

var headerTittle = ["GENERAL","SECURITY","OTHERS"];
    var rowTittles = [
      {
        "rowTtile":"Change User ID",
        "Category":"GENERAL"
      },
      {
        "rowTtile":"Change Password",
        "Category":"GENERAL"
      },
      {
        "rowTtile":"User Information",
        "Category":"GENERAL"
      },
      {
        "rowTtile":"Set Default Account",
        "Category":"GENERAL"
      },
      {
        "rowTtile":"Block Card",
        "Category":"GENERAL"
      },
      {
        "rowTtile":"Deactivate Device",
        "Category":"GENERAL"
      },
      {
        "rowTtile":"Change Mobilepin",
        "Category":"SECURITY"
      },
      {
        "rowTtile":"FingerPrint",
        "Category":"SECURITY"
      },
      {
        "rowTtile":"Facial Recognition",
        "Category":"SECURITY"
      },
      {
        "rowTtile":"Notification",
        "Category":"OTHERS"
      },
      {
        "rowTtile":"Change Language",
        "Category":"OTHERS"
      },
      {
        "rowTtile":"Terms & Condition",
        "Category":"OTHERS"
      },
      {
        "rowTtile":"About",
        "Category":"OTHERS"
      },
      {
        "rowTtile":"FAQ",
        "Category":"OTHERS"
      },
    ];


function segSetting(){
  try{
    var arr = [];
 
 
    for(var i =0; i<headerTittle.length; i++){
   
      var arrRow = [];
   
      var json = {"lblHead":headerTittle[i]};
   
      arr.push([json]);
   
      for(var j = 0; j<rowTittles.length; j++){
        if(headerTittle[i] === rowTittles[j].Category){
          var rowObj = {"lblText":rowTittles[j].rowTtile, "btnText":{"text": rowTittles[j].rowTtile}, flxSeg:{height: "0%"}};
          arrRow.push(rowObj);
        }
      }
   
      arr[i].push(arrRow);
   
    }
 
    frmSeg.segSeg.setData(arr);
 
  }catch(err){
    alert("Error "+err);
  }
}


function segShowRow(context){
  try{
 
    var index = context.sectionIndex;
 
    var data = frmSeg.segSeg.data;
 
    for(var i = 0; i < data.length; i++){
      if( index === i){
     
        for(var j = 0; j < data[i][1].length; j++){
       
          if(data[i][1][j].flxSeg.height === "0%"){
            data[i][1][j].flxSeg.height = "7.5%";
          }else{
            data[i][1][j].flxSeg.height = "0%";
          }
       
        }
     
      }
    }
 
    frmSeg.segSeg.setData(data);
 
  }catch(err){
    alert("Error "+err);
  }
}

Validation using regular expression in Javascript

Validation is an essential process in any mobile or web applications where we use forms. So I am sharing some ideas on how to do some basic validations ion Javascript using regular expressions. As this is for Javascript, there won't be much changes in other languages also.

Some regular expressions for basic validations.

            "/\d/g"             : For matching any digits if present in the string.
            "/\s/g"             : For matching any whitespace character if present in the string.

            "/[a-zA-Z]/g"    : For matching any letters if present in the string.
            "/[0-9]/g"         : For matching any numbers from 0-9 if present in the string.

            "/[abc]/g"         : will check for letters inside the square bracket if present throughout the string.
            "/[a-b]/g"         : will check for items between the range given inside square bracket if present throughout the string.

            "/[a|b]/g"         : will check for any of the items given inside square bracket if present throughout the string.


Test Method

We can use mainly Javascript test() method for pattern checking.

            var pattern = new RegExp("[a-zA-Z]+");
            var str = "Hello World";
            var res = pattern.test(str);
             alert(res);

this will print true as letters are present inside the string str;

like this for checking digits present inside string, we can perform

            var pattern = new RegExp("/\d/g"); OR var pattern = new RegExp("/[0-9]/g");
            var str = "Hello World";
            var res = pattern.test(str);
             alert(res);

for checking whitespace present inside string, we can perform

            var pattern = new RegExp("/\s/g");
            var str = "Hello World";
            var res = pattern.test(str);
             alert(res);

Replace method

If we want to find a pattern in a string and change it with something else, we can use the Javascript replace() method.

If we want to remove all the whitespace characters from the string, we can perform it by

            var pattern = new RegExp("/\s/g");
            var str = "Hello World";
            var res = str.replace(pattern, "");

This will remove all the whitespace characters with empty, like this we can remove any pattern found inside a string, or replace the pattern with some other patterns