Latest Contributions by AndyGup

Hi @MichailMarinakis1 correct there is no overlap between the JS API CSS and calcite-components CSS. Here is an SDK sample app showing them being used in the same application: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=watch-for-changes-reactiveutils. Only as long as Calcite is in beta, you will need to ensure you are using the right version for the corresponding JS API release, and that information can be found in the JS API release notes under the Additional Packages section, for example: https://developers.arcgis.com/javascript/latest/release-notes/#additional-packages Were you able to get a prototype working that combined the two css packages?   ... View more

Hi @MichailMarinakis1  can you share a simple github repository that reproduces the issue? Also, since Calcite is still in beta, we don't recommend mixing different versions of Calcite. The prerelease tags cause issues with the dependency trees. And, yes, thanks for the feedback on needing some doc or an example. We are working on getting that addressed. ... View more

Hi @EmilioPetrangeli  can you try again using the sample here: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-create-react-app? I'm not sure which tutorial you are using, for example you don't need to configure the assetsPath for most installs, the default pattern is to the use CDN-hosted assets as described here: https://developers.arcgis.com/javascript/latest/es-modules/#working-with-assets. ... View more

Thanks for posting that info @Stacy-Rendall. With respect to the original posting on this thread, there are issues with Webpack 4 and "@arcgis/core" versions 4.24+ due to the API being upgraded to ES2020 and including both optional chaining and nullish coalescing operators. Here's the full explanation and Webpack configuration recommendations: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/webpack#known-issues ... View more

Hi @Mannus_Etten I got it working okay using the inline login pattern. The sample you sent me wasn't working correctly because of how Angular routing works. I think you already suspected that because I saw you started to implement a router. Here's the example app.component.ts (Angular 13, "@arcgis/core" version 4.24). You'll need to figure out all the CSS and routing, etc that happens after the log in process. import { Component } from '@angular/core'; import OAuthInfo from "@arcgis/core/identity/OAuthInfo"; import esriId from "@arcgis/core/identity/IdentityManager"; import Portal from "@arcgis/core/portal/Portal"; import PortalQueryParams from "@arcgis/core/portal/PortalQueryParams"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Test Login Page'; private info: OAuthInfo = new OAuthInfo({ // Swap this ID out with registered application ID appId: "YOUR_APPID_GOES_HERE", popup: false }); ngOnInit(): void { esriId.registerOAuthInfos([this.info]); esriId.checkSignInStatus(this.info.portalUrl + "/sharing") .then(() => { console.log("checkSignInStatus: User is signed in."); this.displayItems(); }) .catch(() => { console.error("checkSignInStatus: User not signed in.") }); } displayItems(): void { const portal = new Portal(); // Setting authMode to immediate signs the user in once loaded portal.authMode = "immediate"; // Once loaded, user is signed in portal.load().then(() => { // Create query parameters for the portal search const queryParams = new PortalQueryParams({ query: "owner:" + portal.user.username, sortField: "num-views", sortOrder: "desc", num: 20 }); console.log("User name: ", portal.user.username); // Query the items based on the queryParams created from portal above portal.queryItems(queryParams).then((q) => { console.log("Portal Query results:", q.results); }); }); } // Call from app.component.html page onLogin() { esriId.getCredential(this.info.portalUrl + "/sharing"); } // Call from app.component.html page onLogout() { esriId.destroyCredentials(); window.location.reload(); } }    And here is the example app.component.html: <!-- app.component.html --> <div><button type="submit" (click)="onLogin()"><b>Login</b></button></div> <div><button type="submit" (click)="onLogout()"><b>Logout</b></button></div>   ... View more

Can you clarify what you mean by making sure the login popup can be closed? It should close automatically upon successful login. If a user manually closes the login popup, then it is expected to cancel the login process. That behavior is an industry-standard best practice for all login popups. Can you provide a simple github repo that reproduces the issue? It's hard to say what's happening without seeing an example since there are a lot of pieces involved in authentication. Have you built a non-Angular, plain JavaScript app that is able to log in, just to verify the login functionality? One easy thing to check, when getting credentials be sure to set oAuthPopupConfirmation to false:   document.getElementById("sign-in").addEventListener("click", () => { // user will be redirected to OAuth sign-in page esriId.getCredential((info.portalUrl + "/sharing"), { oAuthPopupConfirmation: false }).then(function() { displayItems(); }); });     ... View more

Hi @Werkwijze_R_beheerder are you working with @Mannus_Etten on the same application? It's a little unclear, and I wanted to make sure the original question got answered, if possible. Your question seems more related to a potential configuration issue. ... View more

@Mannus_Ettenthere are just a couple gotchas in Angular. If you aren't using an oauth popup, make sure you are adding the sign-in divs to your main component's html file. Also make sure to set the redirect_url when you register your app in your Portal (or ArcGIS Online), you may have to experiment with that a bit to get it right for your installation.  Here are some example snippets:   @ViewChild('mapViewNode', { static: true }) private mapViewEl!: ElementRef; @ViewChild('anonymousPanel', { static: true }) private anonEl!: ElementRef; @ViewChild('personalizedPanel', {static: true}) private personalEl!: ElementRef; @ViewChild('signIn', {static: true}) private signInEl!: ElementRef; . . . this.anonEl.nativeElement.style.display = "none"; this.personalEl.nativeElement.style.display = "block"; this.signInEl.nativeElement.addEventListener("click", () => { // user will be redirected to OAuth Sign In page esriId.getCredential(info.portalUrl + "/sharing"); });       ... View more

Hi @DimaY we only have a basic Angular CLI example: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli. We also recommend checking out the SDK Guide topic on ES modules when working with frameworks: https://developers.arcgis.com/javascript/latest/es-modules/. ... View more

@JulianaCastillono you can continue using @arcgis/core as outlined in my steps above. I'm not sure what gave you that impression? Maybe #4 above was confusing because of the link I used, I'll update that information to help clarify. We recommend downloading the JS API documentation for use offline - the JS API documentation applies to both AMD and ESM, the API functionality is the same. To download the documentation, navigate to the ArcGIS API for JavaScript download page and log-in with your Esri global account. If you are using @arcgis/core you won't need to download or use the AMD modules. Did that help? ... View more

Hi @JulianaCastillo 1) Any service you are using, such as map tiles, feature services, etc. have to point to an ArcGIS Enterprise instance. 2) If you can't reach the public NPM repository to install "@arcgis/core" can download the tarball and then run "npm install ./path_to_tarball.tgz" in your project. To get the download location of the latest tarball run "npm view @arcgis/core dist" in a terminal window. 3) Configure the JS API assets to run locally: https://developers.arcgis.com/javascript/latest/es-modules/#managing-assets-locally. For Angular, there are specific instructions in the NPM readme: https://www.npmjs.com/package/@arcgis/core. 4) Download the SDK documentation for local use. To download the documentation, navigate to the ArcGIS API for JavaScript download page and log-in with your Esri global account. If you are using @arcgis/core you won't need to use the AMD modules. ... View more