Mobile Report JS Development Example-Get location

Source: Internet
Author: User
Tags getdate

The last time I shared the Mobile Report JS development system concept, and then I went back to explore a number of cases. Previously contacted by the Finereport app client can be used to punch in the check-in, Curiosity studied the following, this time to talk about the report mobile development How to achieve the positioning function.

1. Solution Ideas

When you design a template with Finereport, add a button control, click the button, get the current location, and copy the location information to a cell, and finally the client to fill out the current template.

2. Example

To achieve the effect shown, click the Location button to get the current position and current time, and display it in the corresponding cell below:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0117/1911/ 02d47126-eb37-39d0-b923-39c8d6ca949a.png "style=" border:0px; "/>

2.1 Template Making


Open the designer, create a new template, design the template as shown in, where E2 is a button control, the control name is a geographic location, C5 is a drop-down box control, E5 is a Time control:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0117/1913/ 3e0adcb7-f8a7-321b-a8cb-49b8d9180302.png "style=" border:0px; "/>

2.2 Get Current Location


There are two ways to get the current location, one is to click the button to get a location, one is to open the template directly when the location is obtained, in the example, we want to achieve by clicking the button to obtain the geographical location.

Get a location by clicking the button

Open the control settings for the button and add a click event for the control, such as:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0117/1915/ D0a01efc-887e-36de-87ae-ab92997994e4.png "width=" 583 "height=" 423 "style=" border:0px; "/>

JS as follows:

Click ( here ) to collapse or open

  1. 1. FR. Location (function(status, message){ //Get geo-location

  2. 2. if (status=="Success") {

  3. 3. //Location successful, message returns latitude and longitude value

  4. 4. FR. MSG. Alert("current position is" + message);

  5. 5. contentpane. Setcellvalue(2, 3, message);

  6. 6. } else {

  7. 7. //Location failed, message returned corresponding error message

  8. 8. FR. MSG. Alert(message); //Location failed

  9. 9. }

  10. . });


Finereport gets the current position through the Fr.location method, or if the status value is success, it means that the location is successful or the location fails, and if the location is successful, the returned geo-location information is assigned to the C4 cell.

However, this method is only useful on the mobile side, if you click on the button event in the Web to obtain a geographic location, the direct prompt to locate failed.

Get the current location after loading ends

If you want to get to the current location after the template is loaded, simply add the above code to the post-load event, open the template, click Templates > Templates Web properties > Fill in the page settings, add a load end event such as:

650) this.width=650; "Src=" http://dl2.iteye.com/upload/attachment/0117/1917/ D525d9e2-cf3f-3ebc-a3d0-2d233ce201c2.png "width=" 565 "height=" 526 "style=" border:0px; "/>

2.3 Get current Time


The current check-in time in the template also needs to be assigned to the past, so you also need to get the current time in the button's click event, and assign the value to E4 cell, JS as follows:

var mydate = new Date (); 12. var mytime=mydate.getfullyear () + "-" +mydate.getmonth () +1+ "-" +mydate.getdate () + "" +mydate.gethours () + ":" + Mydate.getminutes () + ":" +mydate.getseconds (); Gets the current time of 13. Contentpane.setcellvalue (4, 3, mytime);


button click event All JS as follows:

  1. . FR. Location (function(status, message){ //Get geo-location

  2. A. if (status=="Success") {

  3. . //Location successful, message returns latitude and longitude value

  4. . FR. MSG. Alert("current position is" + message);

  5. ContentPane . Setcellvalue(2, 3, message);

  6. var mydate = new Date();

  7. 20.var mytime=MyDate.getFullYear()+"-"+MyDate.GetMonth()+1+"-"+MyDate.getDate()+" "+MyDate.getHours()+":"+MyDate.getminutes()+":"+MyDate.getseconds();//Get current time

  8. ContentPane . Setcellvalue(4, 3, mytime);

  9. .

  10. . } else {

  11. A. //Location failed, message returned corresponding error message

  12. . FR. MSG. Alert(message); //Location failed

  13. . }

  14. . });



2.4 Effect View


Add the template to the tree of nodes in your data decision system, and how to do this by looking at the Add template, where the template is previewed, such as:


According to the steps described in the Add Server section, log in to the system with the mobile side, access the template, click the Location button to get the current location and current time, such as: 650) this.width=650; "Src=" http://dl2.iteye.com/upload /attachment/0117/1921/a691be77-c78b-3239-be32-2627f93d2df0.png "style=" border:0px; "/>


However, the geographic location acquired by Finereport is longitude and latitude, and if you need to determine its exact location, you will need to convert it separately.

Mobile development is also ongoing learning, interested friends can join me to explore the study.


Mobile Report JS Development Example-Get location

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.