Category: Angular

Announcing Power BI Angular Component

August 11, 2021 / / 0 Comments

Microsoft has announced a new component library for the Power BI which will work with the Angular Framework.

The Angular component is now live and available on npm and GitHub.

Check out the sample code below to see how to get started embedding Power BI in your Angular application.

IMPORTING THE LIBRARY

import { PowerBIEmbedModule } from 'powerbi-client-angular';
@NgModule({imports: [ PowerBIEmbedModule]})

EMBEDDING A POWER BI REPORT IN AN ANGULAR APPLICATION:

<powerbi-report
    [embedConfig] = {
        {
            type: "report",
            id: "<Report Id>",
            embedUrl: "<Embed Url>",
            accessToken: "<Access Token>",
            tokenType: models.TokenType.Embed,
                settings: {...},
        }
    }
    [cssClassName] = { "reportClass" }
    [phasedEmbedding] = { false }
    [eventHandlers] = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
        ])
    }
></powerbi-report>

The full code and instructions can be found in the Power BI Angular README.

If you want a glance at the look and feel of the new component, you can check out our demo application here.

The app demonstrates the complete flow from bootstrapping the report, to embedding and updating the embedded report, as well as setting events and enabling report authoring.

You can find instructions on how to run the demo in the demo section of the Power BI Angular README.

That’s all for this post. We hope you found it useful.

We’d love to hear more from you! Have any feedback or a great new feature in mind? Please share it with us or vote in our Power BI Embedded Analytics Ideas forum.

Reference Link: https://powerbi.microsoft.com/en-us/blog/announcing-power-bi-angular-component/

DEMO Link: https://powerbi.microsoft.com/en-us/blog/announcing-power-bi-angular-component

ANGULAR – Unsafe values used in a resource URL Context

May 12, 2020 / / 2 Comments

Ok, when you get this error you are probably trying to use url variable in you template. The most elegant way to fix this is use pipe to bypass security. In this example we will pass URL variable into iframe src.

First of all we will create our pipe. We are injecting the DomSanitizer service, SecurityContext and executing the sanitize and bypassSecurityTrustResourceUrl method to sanitize and bypass security to trust the given value to be a safe style URL.

Note: calling these methods with untrusted USER DATA exposes your application to XSS security risks!

 
import { Pipe, PipeTransform } from '@angular/core';

import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) { }
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
} 
Now add you pipe to app.module:
 
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, SafePipe ],
  bootstrap: [ App ]
}) 

Then just use it!  
<iframe [src]="url | safe"></iframe> 
 
You can create pipes or implement logic for other contexts: 

SecurityContext.NONE 
SecurityContext.HTML 
SecurityContext.STYLE 
SecurityContext.SCRIPT 
SecurityContext.URL 
SecurityContext.RESOURCE_URL

courtesy:  
https://filipmolcik.com/error-unsafe-value-used-in-a-resource-url-context/
We are on YouTube - SharePointGuy
In this quick introduction video, we will check a new Power Fx formula bar editing experience in Power Apps Studio. #LowCode #PowerApps #powerapps #powerfx #formulabar
Power Apps Quick Intro to New Formula bar feature in Power Apps Studio #powerfx #FormulaBar
The video discusses various aspects of React, a popular JavaScript library used for building user interfaces. It covers topics such as components, rendering, props, states, modifying states, arrow functions, and the distinction between stateful and stateless components. The explanations and code snippets provided aim to help readers understand the basics of React and how it can be used to create dynamic and interactive UIs.<br />#React, #JavaScript, #library, #userinterfaces, #components, #rendering, #props, #states, #modifyingstates, #statefulcomponents, #statelesscomponents.<br />0:00 Start<br />0:31 Intro<br />0:43 “All elements in React are components.” Explain<br />1:59 What is the function of the render() method in React?<br />3:05 What is the process for combining two or more components into a single component?<br />4:40 What does the term "Props" mean in the context of React?<br />6:10 Can you explain what a state means in React and how it is utilized?<br />7:32 How can you distinguish between states and props in React?<br />9:10 What is the process for modifying the state of a component?<br />10:53 What is the arrow function in React? How is it used?<br />12:35 Can you describe the various stages that a React component goes through during its lifecycle?<br />13:58 Thank you and Subscribe!!
React Interview Questions and Aanswers - Prepare for Your React Interview #reactinterviewquestions
In this video, we will cover some common React interview questions and their answers to help you prepare for your next React developer job interview. React is a popular JavaScript library for building user interfaces, and its demand is on the rise in the job market. We will start with some basic questions like "What are the advantages of using React?" Then, we will move on to more advanced questions such as "What is the virtual DOM?" By the end of this video, you should have a better understanding of React and be more confident in your ability to answer React-related questions in a job interview. However, keep in mind that this is not an exhaustive list of questions, and the interviewer may ask you more specific or challenging questions based on their project or company's requirements. #Reactinterviewquestions, #Reactinterviewquestionsandanswers, #Reactdeveloperinterview, #Reactdeveloperinterviewquestions, #Reacttechnicalinterview, #Reactjobinterview #Reactbasics, #ReactvirtualDOM, #Reactpropsvsstate, #Front-enddevelopmentinterviewquestions, #Softwareengineeringinterviewquestions, #reactjsinterviewquestionsandanswersforfreshers, #reactjsinterviewquestionsandanswersforexperienced 0:00 Start 0:28 Introduction 0:36 1. Differentiate between Real DOM and Virtual DOM 2:22 2. Define React and describe its key features and applications? 3:12 3. What are some characteristics of React? 4:27 4. What are some of the significant advantages of React? 5:19 5. What are the disadvantages or limitations of React in terms of development? 6:24 6. What does the term JSX mean? 7:26 7. Could you define the concept of Virtual DOM and describe how it functions? 9:14 8. What is the reason that browsers cannot interpret JSX? 10:10 9. In what ways does React's ES6 syntax differ from ES5 syntax? 14:07 10. What are the differences between React and Angular? 15:39 Outro
Top 10 Interview questions for React #react #interviewquestionsandanswers #interviewquestions
In this second part of the series, we will go through the next 20 questions of the Power Apps Interview questions with answers<br />#powerapps #interview #interviews #interviewquestionsandanswers #interviewquestions
40 Power Apps Interview questions with answers Part 2 #powerapps #powerapp #interview
Are you preparing for a job interview that involves Power Apps? This video will help you by providing a list of the top 40 Power Apps interview questions along with detailed answers. The questions have been selected based on their popularity and importance in the Power Apps development process. In this first part, we'll cover 20 questions, and in part 2, we'll cover the remaining 20 questions. Power Apps, interview questions, job interview, Power Apps development, Microsoft Power Apps, low-code development, app development, Power Platform, app building.
Top 40 Power Apps Interview Questions and Answers (Part 1)
Introduction to the Graph API in Power Apps without Custom connectors In this video, we will see how we can utilize the office 365 groups connector to call a graph API from the canvas app #canvas app #powerapp #graphapi #graph api #powerapps #power apps 0:00 Introduction 0:25 Demo 15:30 Subscribe
Using Graph API in canvas apps #graphapi #canvas #powerapps
How to add Microsoft Teams Channel Calendar in a channel #microsoftteams #microsoftteamscalendar<br />0:00 start<br />0:16 Introduction<br />0.26 Demo<br />5:05 Subscribe
How to add Microsoft Teams Channel Calendar in a channel #microsoftteams #microsoftteamscalendar
In this video, we will see how we can set the MS Teams Status Messages. #microsoftteams #microsoftteamsstaus 0:00 Intro 0:26 Demo 6:14 Subscribe
Set Status Messages in MS Teams #microsoftteams #microsoftteamsstaus
This video will teach us to convert SharePoint Online Out of the box to friendly Tabbed forms.<br />0:00 Intro<br />0:29 Demo<br />14:00 Subscribe
SharePoint Forms as Tabbed Forms using Power Apps
Load More... Subscribe

© 2023

Theme by Anders Noren — Up ↑