Is it possible to deviate from the standard Acumatica page layout options?

Question

I am working on a proof of concept project in Acumatica.

Concept

I would like to develop a page that retrieves a list of Customers' addresses and plots them on an embedded Google Maps element.

Issue

I know how to retrieve a list of Customer addresses, and I have code from an article explaining how to plot map points. My issue is, the map itself is a dynamic JavaScript function, not an embedded map from elsewhere. I am struggling to find a way to use the following code (or similar) to display a result on a custom page.

Concepts I've tried:

• (current) Use PXLiteral to encapsulate the required elements
• Manually edit the ASPX to include <div> and <script> elements that the Customization Editor would normally remove
• Create a custom MasterPage file to remove page restrictions

All these attempts have worked in the sense that the code compiles and the page loads. However, none of them work in the sense that any elements are displayed on the page.

Code

<%@ Page Language="C#" MasterPageFile="~/MasterPages/MapView.master" AutoEventWireup="true" ValidateRequest="false" CodeFile="IN30MX00.aspx.cs" Inherits="Page_IN30MX00" Title="Untitled Page" %>
<%@ MasterType VirtualPath="~/MasterPages/MapView.master" %>

<asp:Content ID="cont1" ContentPlaceHolderID="phDS" Runat="Server">
    <px:PXDataSource ID="ds" runat="server" Visible="True" Width="100%"
        TypeName="MixingCustomization.Map"
        PrimaryView="MasterView">
        <CallbackCommands>

        </CallbackCommands>
    </px:PXDataSource>
</asp:Content>
<asp:Content ID="cont2" ContentPlaceHolderID="phF" Runat="Server">
    <px:PXLiteral runat="server" Text="l1">
        <div id="map" runat="server"></div>
    </px:PXLiteral>
    <px:PXLiteral runat="server" Text="l2">
        <script>
            // Initialize and add the map
            function initMap() {
                // The location of Uluru
                var uluru = { lat: -25.344, lng: 131.036 };
                // The map, centered at Uluru
                var map = new google.maps.Map(
                    document.getElementById('map'), { zoom: 4, center: uluru });
                // The marker, positioned at Uluru
                var marker = new google.maps.Marker({ position: uluru, map: map });
            }
        </script>
    </px:PXLiteral>
    <px:PXLiteral runat="server" Text="l3">
        <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
    </px:PXLiteral>
</asp:Content>

Question

1. Does anyone have any helpful direction OR 2) know for certain that this is NOT possible.

Answer 1

I certainly want to follow up and find out how you make out with this as I have always wondered if it's possible to bring in custom controls. My first inclination would be to try using an iframe. this link seems to point to an example of bringing an Iframe into an acumatica page. Its likely worth a try but I'm not certain if this is going to answer your question so my apologies ahead of time if it does not. IFRAME in acumatica form I assume the biggest challenge would be getting the value into the variables of the iframe. You will likely need to look at engaging a PSJavaScript control for that