Successfully!

Error!

App - Get Current Geographic Location

  • Last update:  2020-12-22
  • I. Overview

    Some mobile reports may require some information about users, such as a specific address or the longitude and latitude data of one's current location. To address this issue, you can utilize JavaScript scripts to obtain the location information directly, with users having their hands freed from manually typing in addresses.

    You will learn
    • Obtain the Latitude and Longitude Information in General Reports

      • Design a Template

      • Add a Click Event for the Button Widget

      • Preview the Results in the App

      • Template Download

    • Obtain the Latitude and Longitude Information in Dashboards

      • Design a Template

      • Add a Click Event for the Button Widget

      • Preview the Results in the App

      • Template Download

    • Obtain the Address in Text Widget

      • Prepare the Script File

      • Design a Template

      • Add a Click Event for the Button Widget

      • Preview the Results in the App

      • JSP File and Template Downloads

    II. Obtain the Latitude and Longitude Information in General Reports

    1. Design a Template

    1) Click on Template -> Mobile Attribute, check on "Set as mobile canvas size".

    2) Input texts into cell A1 and A2. Insert a text widget into B1 and B2 respectively. Merge cell A3 and B3, add a button with the widget value of "Get coordinates".

     

     

    2. Add a Click Event for the Button Widget

    3.png 

    Use the following JS script:

    FR.location(function(status, message) { 
        if (status == "success") {
            var latitude = message.split(",")[0];
            var longitude = message.split(",")[1]
            contentPane.setCellValue(1, 0, latitude)
            contentPane.setCellValue(1, 1, longitude)
        } else {
            FR.Msg.alert(message); 
        }
    });


    3. Preview the Results in the App

    1) Mount the template into the directory, set Type to "Data Entry" and Terminals to "Mobile".

    2) The longitude and latitude of the current location will be displayed in text widgets once clicked on the button.

     


    4. Template Download

    Get coordinates.cpt

    III. Obtain the Latitude and Longitude Information in Dashboards

    1. Design a Template

    1) Click on Template -> Mobile Attribute, check on "Set as mobile canvas size".

    2) Drag in two label widgets, and set their values to "Latitude" and "Longitude". Add two text widgets and rename them as "latitude" and "longitude". Then, add a button with the widget value of "Get coordinates", and set its background color to blue and text color to white.

     

    3) Click on "body" and switch the panel to Mobile Terminal,  unselect App Relayout and adjust the widget order below.

     


    2. Add a Click Event for the Button Widget

    9.png 

    Use the following JS script:

    var self = this;
    FR.location(function(status, message) {
       if (status == "success") {
           var coordinates = message.split(",");
           self.options.form.getWidgetByName("latitude").setValue(coordinates[0]);
           self.options.form.getWidgetByName("longitude").setValue(coordinates[1]);
       }
    });


    3. Preview the Results in the App

    1) Mount the template into the directory, set Type to "Data Entry" and Terminals to "Mobile".

    2) The longitude and latitude of the current location will be displayed in text widgets once clicked on the button.

     


    4. Template Download

    Get coordinates.frm

    IV. Obtain the Address in Text Widget

    1. Prepare the Script File

    Put getaddress.jsp into %Tomcat_HOME%\webapps\webroot.

    Note: the JSP file must be stored in a post-deployment project. It won't take effect on the designer built-in server.

     

    2. Design a Template

    Drag in a label widget with its widget value set to "Address". Add a text widget and rename it to "address". After that, put in a button, and set its widget value to "Get address"

    12.png 

     

    3. Add a Click Event for the Button Widget

    13.png 

    Use the following JS script:

    var longitude = 116.322987;
    var latitude = 39.983424;
    var address = this.options.form.getWidgetByName("address");
    FR.location(function(status, message) {
       if (status == "success") {
           var coordinates = message.split(',');
           latitude = coordinates[0];
           longitude = coordinates[1];
           setTimeout(function() {
               FR.ajax({
                   url: "/webroot/getaddress.jsp?jingdu=" + longitude + "&weidu=" + latitude,
                   success: function(msg) {
                       address.setValue(msg);
                   }
               });
           }, 500);
       }
    });


    4. Preview the Results in the App

    Click on "Get address" and the address of the current location will be shown in the text widget.

    14.gif 


    5. JSP File and Template Downloads

    getaddress.jsp

    Get address.frm


    Attachment List


    Theme: Fine Mobile
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback