Power App Component Framework with ArcGis Embed

[dkbollig]

Hey All

I have been working to see if I can create an embed of an arcgis map but I find I am having a hard time with typescript errors. For example when using the typescript library of arcgis-js-api it --  "Can't resolve 'esri/Maps'".  I have attached a standard html / javascript implementation example. 

https://codepen.io/dkbollig/pen/WNNyWzm?&editable=true&editors=100

Thanks for any help on this.

[aventham77]

Many thanks Derek - it'd be great to have some code that we know "should" work!

Yes it all works very nicely in the npm test harness.

I've tried a public web map on arcgis.com, and a private map on our own IWA-secured portal. Again, both work in the test harness.

I haven't used codepen but will think about what I can share and how!

[dkbollig]

Does this code work in your situation?  @aventham77 

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import DataSetInterfaces = ComponentFramework.PropertyHelper.DataSetApi;
import { any } from "prop-types";
import { watchFile } from "fs";
import { setDefaultOptions, loadModules } from "esri-loader";
import { METHODS } from "http";
type DataSet = ComponentFramework.PropertyTypes.DataSet;

export class TerritoryViewComponent
  implements ComponentFramework.StandardControl<IInputs, IOutputs> {
  private _context: ComponentFramework.Context<IInputs>;
  map: __esri.Map;
  mapView: __esri.MapView;
  private _mapContainer: HTMLDivElement;
  private _longitude: string;
  private _latitude: string;
  private contextObj: ComponentFramework.Context<IInputs>;

  /**
   * Empty constructor.
   */
  constructor() {}

  /**
   * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
   * Data-set values are not initialized here, use updateView.
   * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
   * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
   * @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
   * @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
   */
  public init(
    context: ComponentFramework.Context<IInputs>,
    notifyOutputChanged: () => void,
    state: ComponentFramework.Dictionary,
    container: HTMLDivElement
  ) {
    // Add control initialization code
   
    this._mapContainer = document.createElement("div");
    this._mapContainer.setAttribute("id", "mapNode");
    this._mapContainer.setAttribute("style", "height:80vh;");

    container.append(this._mapContainer);

    this._context = context;
    this._context.parameters.dataSet.paging.setPageSize(10000);
  }

  private PageLoaded(context: ComponentFramework.Context<IInputs>): void {
    this._longitude = this._context.parameters.longitude.raw as string;
    this._latitude = this._context.parameters.latitude.raw as string;
    console.log("page loaded");
    console.log(typeof jQuery);

    if (context.parameters.dataSet.loading) {
      context.parameters.dataSet.paging.setPageSize(5000);
      console.log(context.parameters.dataSet.sortedRecordIds.length);
      return;
    }

    if (context.parameters.dataSet.paging.hasNextPage) {
      context.parameters.dataSet.paging.loadNextPage();
    } else {
      try {
        const options = {
          // tell Dojo where to load other packages
          dojoConfig: {
            async: true,
            isDebug: true,
            parseOnLoad: false,
            packages: [
              {
                name: "jquery",
                location:
                  "https://www.crmdynint.com/Scripts/jquery-2.1.1.js?v=1.3",
                main: "jquery-2.1.1",
              },
            ],
          },
        };
        setDefaultOptions({ css: true });
        loadModules(
          [
            "esri/Map",
            "esri/views/MapView",
            "esri/WebMap",
            "esri/layers/FeatureLayer",
            "esri/widgets/Search",
            "esri/widgets/Fullscreen",
            "esri/widgets/Legend",
            // "esri/widgets/TimeSlider",
            // "esri/views/layers/FeatureLayerView",
            // "esri/views/2d/layers/features/tileRenderers/SymbolTileRenderer",
            // "moment/moment",
            // "esri/support/arcadeUtils",
            "esri/widgets/LayerList",
            "esri/layers/GraphicsLayer",
            "esri/Graphic",
            "esri/PopupTemplate",
          ],
          options
        )
          .then(
            ([
              Map,
              MapView,
              WebMap,
              FeatureLayer,
              Search,
              Fullscreen,
              Legend,
              TimeSlider,
              LayerList,
              GraphicsLayer,
              Graphic,
              PopupTemplate,
            ]) => {
              // then we load a web map from an id

              // Paste the url into a browser's address bar to download and view the attributes
              // in the CSV file. These attributes include:
              // * mag - magnitude
              // * type - earthquake or other event such as nuclear test
              // * place - location of the event
              // * time - the time of the event
              var template = {
                title: "{NAME}",
              };

              var acretemplate = {
                title: "{NAME} , {STATE_NAME}",
                content: [
                  {
                    type: "fields",
                    fieldInfos: [
                      {
                        fieldName: "SUM_ACRES",
                        label: "Total Corn Acres",
                        format: {
                          digitSeparator: true,
                          places: 0,
                        },
                      },
                    ],
                  },
                ],
              };

              const dealerlabelClass = {
                // autocasts as new LabelClass()
                symbol: {
                  type: "text", // autocasts as new TextSymbol()
                  color: "black",
                  haloColor: "black",
                  font: {
                    // autocast as new Font()
                    family: "Playfair Display",
                    size: 10,
                    weight: "bold",
                  },
                },
                labelPlacement: "above-center",
                labelExpressionInfo: {
                  expression: "$feature.NAME",
                },
              };

              var corn_acres = new FeatureLayer({
                url:
                  "https://utility.arcgis.com/usrsvcs/servers/a3e76e21469940df8580dcc9fcb72dcd/rest/services/2018_Corn_Acres/FeatureServer",
                popupTemplate: acretemplate,
              });

              var map = new Map({
                basemap: "hybrid",
                layers: [corn_acres],
              });

              var view = new MapView({
                container: "mapNode",
                center: [263, 43],
                zoom: 6,
                map: map,
              });
              var legend = new Legend({
                view: view,
                layerInfos: [
                  {
                    layer: corn_acres,
                    title: "Corn Acres per Square Miles",
                  },
                ],
              });
              view.ui.add(legend, "bottom-left");
              var searchWidget = new Search({
                view: view,
              });

              view.ui.add(searchWidget, {
                position: "top-right",
              });

              var fullscreen = new Fullscreen({
                view: view,
              });
              view.ui.add(fullscreen, "top-right");

              var dataSet = context.parameters.dataSet;

              view.when(function () {
                var layerList = new LayerList({
                  view: view,
                });

                view.ui.add(layerList, "bottom-left");
              });
            }
          )
          .catch((err) => {
            // handle any errors
            console.error(err);
          });
      } catch {
        console.log;
      }
    }
  }

  /**
   * Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
   * @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
   */
  public updateView(context: ComponentFramework.Context<IInputs>): void {
    // Add code to update control view
    this.PageLoaded(this._context);
  }

  /**
   * It is called by the framework prior to a control receiving new data.
   * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
   */
  public getOutputs(): IOutputs {
    return {};
  }

  /**
   * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
   * i.e. cancelling any pending remote calls, removing listeners, etc.
   */
  public destroy(): void {
    // Add code to cleanup control if necessary
  }
}

[aventham77]

Hi @dkbollig - many thanks for sharing your code!

I'll definitely give this a whirl; I have a couple of questions though if you don't mind...

After an initial skim through, I'm not immediately clear on why you need to bring the jQuery package in - could you explain that?

Is this code working in an actual PowerApp? If so, hearty congratulations to you as that feels like a real breakthrough from where I'm sitting!

Did you find that basing the mapview on a webmap didn't work for you, or did you just switch to this approach out of preference?

[aventham77]

Unfortunately, I'm having the same experience with the code you posted @dkbollig - it all runs well in the test harness, but when I import the built component and add it into an actual PowerApp, I just end up with an empty map object, with no layers loaded.

[aventham77]

My suspicion is that some sort of security restriction is preventing the ESRI JS API from making any "fetch" requests.

[dkbollig]

Hey Andy

Would you be using a model driven app or a canvas app?

I have been using the model driven app for power apps.

Thanks Derek

[aventham77]

Aha... I've been trying to create a canvas app.

Thanks for letting me know - I guess that's the clincher!

[ZePowerDiver]

@dkbollig & @aventham77 - have you had success after all?
I'm working on a project where the customer requests integration of ESRI geolocation map within Dynamics and their Dynamics solution is not available anymore, so I wondered about the PCF route.

[aventham77]

Hi @ZePowerDiver - I didn't make any big breakthroughs with my canvas app, but as I understand it, @dkbollig had the above code working in a model-driven app.

[DCR_FRODRIGUEZ]

Hey all, I was wondering if any of you had any luck with this, it seems a shame for our org to have both AGOL licenses and M365 but not be able to use the api in our apps.