cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Regular Visitor

Re: Power App Component Framework with ArcGis Embed

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!

Highlighted
Frequent Visitor

Re: Power App Component Framework with ArcGis Embed

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
  }
}
Highlighted
Regular Visitor

Re: Power App Component Framework with ArcGis Embed

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?

Highlighted
Regular Visitor

Re: Power App Component Framework with ArcGis Embed

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.

Highlighted
Regular Visitor

Re: Power App Component Framework with ArcGis Embed

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

Highlighted
Frequent Visitor

Re: Power App Component Framework with ArcGis Embed

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

Highlighted
Regular Visitor

Re: Power App Component Framework with ArcGis Embed

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

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

Helpful resources

Announcements
secondImage

Demo-Extravaganza 2020

Check out these cool Power Apps & vote on your favorite!

secondImage

Community Highlights

Check out whats happening in Power Apps

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (7,402)