When I add a new company to the Companies catalog, I often want to see where it is on a map. It helps me a lot when I’m planning my truck routes to pick up ordered goods from my suppliers. Doing this today God knows which time, I thought: wouldn’t it be much cooler to see the map right here in this form? So, let’s see how it’s done.
But first, I need to tidy up this form a little bit. So, I’m creating the Pages group and then these three pages: Main, Contacts, and Addresses. Code, Description, Business number, and Prefix go to the Main page. Contacts go to the Contacts page,and both addresses to the Addresses page. OK, now it’s better.
As for the map (or any other webpage for that matter), this is how it works in 1C:Enterprise. I’m creating a new independent attribute of the String type, then dropping it to the Addresses page and disabling its title display like this.
Now, watch this. The Platform created this new field element and set its Type to the Text box. I’m just changing the Type to the HTML document field, and the field is now a browser window. Cool, huh?
OK, let’s now go on and display some webpage here, shall we? There is one and only thing I need to do to make this happen. I need to set this attribute value to any valid URL.
For example, if I set it to 1c.com during the form creation on the server side, this is what I will see when the form is opened. But this is not the URL we need, so I’m deleting this. What we do need is to embed this physical address to the Google Maps URL, so it shows the place on the map.
But how we do that? Let’s check out what Google has to say about this. I opened the Google Maps documentation page, and here is the Maps URLs link. OK, let’s dive in,and here we go. This is the URL we need, and here is its query parameter that accepts addresses as long as they are URL-escaped like this.
Looks confusing? Don’t worry, 1C:Enterprise has you covered. Let me show you how easy this really is. First of all, we need a button to refresh the map, right? So, I’m adding a new form command, creating an empty handler for "this button was clicked" event, then dropping the command to the form element list and making it stretch horizontally along with the form like this.
Now, to the click event handler. I’m assigning the OpenThisURL attribute value to this URL beginning we looked up in Google Maps doc and adding the physical address taken from the Company object attribute. Except I need to perform this URL-escape thingy with this string. The thing is that URLs do not accept some symbols - spaces, commas, square brackets and such. If you want any of these inside of the URL, you need to replace them with so-called escape symbol and then a unique number of your not-URL-friendly symbol.
The Platform has the EncodeString function doing just this: replacing invalid symbols with their escapes. It’s available only on the server side. So, I’m creating a server-side function that returns the encoded URL. The second parameter is an encoding method with these two values available, and we need the first one here. Now I’m calling this function from here, and we’re done.
Let’s see what we’ve got. I’m opening the Wholesale Market company form, clicking Refresh, and here is my supplier on the map. Perfect.