Airo Global Software

Think Beyond Future !

Uncategorized

Topics that don't need a category, or don't fit into any other existing category.

PowerApps is primarily a mobile and web app development platform. It enables "citizen developers" to access capabilities that were previously only available to high-end development tools. Furthermore, PowerApps is generally simple to learn. You can use it to quickly take control of your destiny as long as you make the right structuring decisions. Follow this guide to avoid unpleasant surprises.

What does the Power Platform for PowerApps stand for?

Power BI, PowerApps, and Flow are components of the Power Platform. Microsoft has been promoting this as a whole more and more. These three services provide tools for managing our digital world, where data reigns supreme and serves as the foundation of all enterprise processes. The following are their applications:

  • Power BI can be used to display and analyze data.
  • PowerApps allows you to act on and modify data.
  • Flow allows you to automate data.

How to Create an App Using Microsoft PowerApps?

Starting with the data source is the simplest way to build a PowerApps app.

  1. In this example, we'll begin with a SharePoint list containing consulting interventions:

  2. Next, in the PowerApps menu, select the "Create an app" option:

  3. This will take us to the PowerApps Studio, where we will find a fully functional canvas app created by the system:

Remember that these are only the default options. They conceal a much broader set of available options, configurations, and architectural options provided by PowerApps.

Step 1: Choose a PowerApps Environment

Within PowerApps, you can work with four different tools or environments, each with its own set of capabilities and roles.

  • Website for PowerApps

You'll start your PowerApps service journey on the website. This is where you can create new apps and manage existing ones.

  • PowerApps Studio

Here you will be able to design and adapt apps to your specific business needs!

  • PowerApps Mobile App

This useful mobile app is available for both smartphones (iOS and Android) and tablets (Windows 10). Regardless of the platform, the app provides a runtime environment in which you can execute all of your PowerApps apps. This includes both those that were shared with you and those that you designed and coded yourself.

  • PowerApps Admin Center

You can create and manage environments, DLP (Data Loss Prevention) strategies, and user roles using Admin.powerapps.com. A list of user licences is available in the tenant.

Step 2: Choose a PowerApps Application Type

PowerApps allows you to create two types of apps:

  • Apps for Canvas
  • Model-driven applications

Canvas apps allow you to organize your interface freely and easily by positioning controls and fields in a "pixel-perfect" user experience. The main goal here is to apply your business knowledge and creativity to the design of the app. Canvas apps are designed to be lightweight or even disposable apps that can be designed and used in a matter of minutes.

Model-driven apps are built on top of the Common Data Services, which are used to help developers quickly create forms, processes, and business rules. They concentrate on heavier apps that are intended to be used frequently (multiple hours at a time).

There is also a "third" type of app that is technically a version of Canvas: SharePoint lists customized forms. PowerApps can be used to customize the standard SharePoint form from a SharePoint list. After selecting the "customize forms" menu, you will gain access to a PowerApps component called "SharePointIntegration."

This control is in charge of transferring user actions between PowerApps and SharePoint. It adds properties such as "new," "OnSave," and "OnEdit" that allow the app to respond when a user clicks or taps the "New" button, taps an item, or taps the "Edit All" button.

Step 3: Determine Your Storage Needs

Power Platforms, and more particularly PowerApps, are desired in a world in which information is king and the basis of any business process. Thus, when it comes to creating an app, selecting the right data sources is critical.

SharePoint lists and Excel spreadsheets are two of the most commonly used data sources, but there are over 200 data connectors available. PowerApps and Flow and Logic apps share connectors (the Azure service on top of which Flow is built). One of the platform's greatest strengths is the availability of connectors to the Microsoft world: Office 365, SQL Server, Azure, and so on, as well as connectors to external data sources such as Salesforce, Dropbox, and Google Drive.

A connector in PowerApps can provide data tables, actions, or both. Here's an example of how to use a data source to a "Lessons" table in PowerApps: Be aware that the data sources you choose will have an impact on the licences required to create and run your app. If you select or require a Premium source (such as Salesforce or Common Data Service), you will require a PowerApps P1 or P2 licence.

Step 4:Secure Your App to an Online or On-Premises Data Citation

PowerApps was built in the cloud and can connect to cloud data sources natively. However, it can also connect to on-premises data sources. In order for this to happen, you must set up an on-premises data gateway. This gateway is shared by several cloud apps, including the entire Power Platform (Power BI, Flow, and PowerApps), Azure Analysis Services, and Azure Logic Apps.

At the time of writing, the gateway supported the following data sources:

  • SharePoint
  • Oracle
  • SQL Server
  • Filesystem
  • Informix

Be aware that using on-premises data sources will affect the licences required to create and run your app. If you select or require a local data source, you will require a PowerApps P1 or P2 licence. Let's hope that these elements will help you create better PowerApps to meet your business needs. If you have any questions or concerns, please contact Airo Global Software through the email given below.

E-mail id: [email protected]

When we first start learning Angular, we learn that there are two types of directives: Attribute directives and structural directives. We will only look at Structural Directives in this section. This includes the ability to remove an element and replace it with something else, as well as the ability to create additional elements.

As you are aware, we must distinguish Structural directives from Attribute directives in code: Structural directives should be preceded by *: *ngFor, *ngIf. Actually, when I first read this, I thought the distinction was strange and even cumbersome. Let's see if we can figure out why we need this * for the structural directive.

We will implement three different structural directives throughout the article to help you grasp the main idea.

What is ng-template?

Before we go any further, let's make sure we're all on the same page and understand what ng-template is. Let's create a simple component using this element to see what Angular actually renders:

As you can see, we defined an ng-template with a span element inside the component template. However, we do not see this span in a browser. Doesn't it appear to be a waste of time? Wait a minute, of course, it's useful and serves a purpose.

What is ng-container?

Let's look at it again with a component creation:

We can see the content that we put inside the ng-container here, but the container itself is hidden. If you're familiar with React, you'll probably recognize the behaviour a fragment or abbreviation for it.

Connect ng-container and ng-template.

Actually, we can ask Angular to render content that we explicitly place inside of the ng-template. To do so, we must first complete the following steps: step 1: get a reference to ng-template in a component.

step 2: get a reference to a container (any DOM element) where we want to render ng-content. template's

Step 3: Render content in a container programmatically.

Step 1: we define a template reference #template for the ng-template element and gain access to it via the ViewChild decorator. (you can also ask for it using this: @Input('template', read: TemplateRef ) template: TemplateRefany>).

Step 2: In the template, define a container where we want to render a predefined template and get access to it in component:

We want to read it as ViewContainerRef. Keep in mind that we can use any DOM element for containers, not just ng-container, but it keeps our layout clean because Angular doesn't leave any ng-container feet in the layout.

Step 3: We'll only have access to the container and template during the ngAfterViewInit lifecycle, and we'll need to render a template in a container: We simply generated a view from a template and inserted it into the container.

Structural Directive

You may wonder why, rather than explaining structural directives first, I started with ng-template and ng-container. However, it is necessary to explain why we put * before these directives. And the answer is that when Angular sees *, it treats our template differently and adds the following elements: Angular encircles our template with the ng-template element. That is, if the ngFor directive was not implemented, we would see nothing. Angular also creates a placeholder space called embedded view, where the directive can decide what to insert inside of this empty view container, for example, inserting the content of ng-template in the specific time as we did above.

Example 1: Create your own ngIf directive. Assume that Angular does not have a built-in directive like ngIf and that we must create our own with the name customIf. Let's build it with the Angular CLI: ng g d directives/custom-if It automatically creates a custom-if.directive.ts file in the directives folder and declares it in AppModule:

@Directive({
  selector: '[appCustomIf]'
})
export class CustomIfDirective {
  constructor() { }
}

Because Angular does some work behind the scenes — wrapping our template in ng-template and creating a placeholder for any content — we can ask Angular to provide access to those elements in a function native code:

@Directive({
  selector: '[appCustomIf]'
})
export class CustomIfDirective {
  constructor(
     private template: TemplateRef,   
     private container: ViewContainerRef) { }
}

@Directive({ selector: '[appCustomIf]' }) export class CustomIfDirective { @Input() appCustomIf!: boolean; constructor( private template: TemplateRef,
private container: ViewContainerRef) { } }

If @Input is true, the final step is to render the template in a container in the ngOnInit method:

@Directive({
  selector: '[appCustomIf]'
})
export class CustomIfDirective implements OnInit {
  @Input() appCustomIf!: boolean;
  constructor(
     private template: TemplateRef,   
     private container: ViewContainerRef) { }
  ngOnInit() {
     if (this.appCustomIf) {   
          this.container.createEmbeddedView(this.templateRef);
      }
   }
}

Congratulations! You've carried out the first structural directive. However, I believe that implementing the custom ngFor directive would be more interesting. Let's give it a shot.

Example 2: Creating a custom ngFor directive.

Let us recall how ngFor is used:

< ul>
  < li *ngFor="let value of values; let index">
    {{index}} {{value}}
  < /li>
< /ul>

It may appear strange given that we know we can bind to directive only JS expressions that produce a single value. However, this one, which is used, generates multiple values, let the value of values. The first source of confusion may be that we attempt to map keywords with JS keywords that we use in conjunction with for...of, but it has nothing in common with this one. Angular has its own DSL language, but we can use any word we want. Let us proceed in chronological order.

First and foremost, the expression on the right side of directive ngFor is known as macro syntax. Let us try to describe its structure: In this case, context can be anything with which we want to render a template in the target container, but it must be set as an element along with values during iteration. Remember that we typically define a template type as TemplateRefany>, which is a type of context for our template.

Which name should we use to gain access to value in values is the more interesting part here. There are three parts:

  • The first part is the name of the directive (in our case, ngFor).
  • The second part is the name of the word before value (in our case, of).
  • The third part is the name of the word after value (in our case, of).

As I previously stated, you can use any word you want instead of, for example, iterate, and access to the value will be via @Input('ngForIterate'), which is also known as a binding key.

So far, so good, I hope. Let's get started with our customFor directive. As is customary, let's use Angular CLI to build scaffolding for a directive:

directives/customFor ng gd

@Directive({
  selector: '[appCustomFor]'
})
export class CustomForDirective {
  constructor() { }
}

|

To spice things up, let's define our microsyntax for the developing directive:

< ul *appCustomFor="let value iterate values; let index">
  < li>{{index}} {{value}}< /li>
< ul>

With the following decorator, we can gain access to values:

@Input('appCustomForIterate') items: any[]

We used the following API to render a template in a container:

this.containerRef.createEmbeddedView(this.templateRef)

and the method createEmbeddedView accepts the second argument, which is a template context:

this.containerRef.createEmbeddedView(this.templateRef, {
  '$implicit': '' // any value which we want
  index: 0 // any value which we want
})

Keep an eye out for the $implicit key, which in our case manipulates value for value in our expression. Let's take a look at how we might put this directive into action: import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appCustomFor]',
 })
 export class CustomForDirective implements OnInit {
  @Input('appCustomForIterate') items!: any[];
  constructor(
    private templateRef: TemplateRef<{'$implicit': any, index: number}>,
    private containerRef: ViewContainerRef
  ) {}
  ngOnInit() {
    for(let i = 0; i< this.items.length; i++){
    this.containerRef.createEmbeddedView(this.templateRef, {
        index: i,
        '$implicit': this.items[i]
      })
    }
  }
 }

Pay attention to the fact that I purposefully changed the key used in the built-in directive ngForinto iterate, so we can use this directive as follows:

< div *appCustomFor="let value iterate items; let i = index">
 
 {{value}} {{i}}
 < /div>

Example 3: Structural Directive-compliant custom carousel

Let's look at a more concrete example for production. Let us suppose we need to use Carousel. We must pass a list of images for the carousel to the directive, and the custom directive must display one current image with the option to move forward/backward.

< div *appCarousel="let image of images; let ctr = ctr">
 
 
 < img [src]="image" />
 
 < button (click)="ctr.prev()">Prev
 
 < button (click)="ctr.next()">Next
 
< /div>

Let's begin as usual by creating a directive with Angular CLI and injecting TemplateRef and ViewContainerRef into the function native code. Also, we need to get access to the value in the images variable, which we can do with a key binding @Input('appCarouselOf'):

import { Directive, Input, OnInit, ViewContainerRef, TemplateRef } from '@angular/core';
 
@Directive({
  selector: '[appCarousel]',
 })
 export class CarouselDirective {
  @Input('appCarouselOf') images!: string[];
 
 currentIndex = 0;
  
 constructor(
    private templateRef: TemplateRef,
    private viewContainer: ViewContainerRef
  ) {}
 }

So far, everything should be familiar. So, let's create a method that is in charge of template rendering in a container. Before we begin, keep in mind that the usage of this directive allows for the creation of images. In the template context, let ctr = ctr, we must pass two variables: $implicit maintains the current carousel image, ctr — controller in charge of image rotation

@Directive({
  selector: '[appCarousel]',
 })
 export class CarouselDirective implements OnInit {
  // skipped for brevity
  renderCurrentSlide(){
    this.viewContainer.clear();
   this.viewContainer.createEmbeddedView(this.templateRef, {
        ctr: this,
        '$implicit': this.images[this.currentIndex]
    })
  }
 }

And now we'll implement two methods that will be available in the controller: next and previous:

@Directive({
  selector: '[appCarousel]',
 })
 export class CarouselDirective implements OnInit {
  // skipped for brevity
  next(){
    this.currentIndex = this.currentIndex === this.images.length - 1 ? 0 : this.currentIndex + 1;
    this.renderCurrentSlide();
  }
  prev(){
    this.currentIndex = this.currentIndex - 1 < 0 ? this.images.length - 1: this.currentIndex - 1;
    this.renderCurrentSlide();
  }
 }

The full implementation:

import { Directive, Input, OnInit, ViewContainerRef, TemplateRef } from '@angular/core';
 @Directive({
  selector: '[appCarousel]',
})
export class CarouselDirective implements OnInit {
  @Input('appCarouselOf') images!: string[];
   currentIndex = 0;
   constructor(
    private templateRef: TemplateRef,
    private viewContainer: ViewContainerRef
  ) {}
   ngOnInit() {
    this.renderCurrentSlide();
  }
   renderCurrentSlide(){
    this.viewContainer.clear();
    this.viewContainer.createEmbeddedView(this.templateRef, {
        ctr: this,
        '$implicit': this.images[this.currentIndex]
    })
  }
 
  next(){
    this.currentIndex = this.currentIndex === this.images.length - 1 ? 0 : this.currentIndex + 1;
    this.renderCurrentSlide();
  }
   prev(){
    this.currentIndex = this.currentIndex - 1 < 0 ? this.images.length - 1: this.currentIndex - 1;
    this.renderCurrentSlide();
  }
}

If you have any doubt about Mastering Angular Structural Directives. Please Contact us through the given email. Airo Global Software will be your digital partner.

E-mail id: [email protected]

enter image description here Author - Johnson Augustine
Chief Technical Director and Programmer
Founder: Airo Global Software Inc
LinkedIn Profile: www.linkedin.com/in/johnsontaugustine/

Zeplin is a well-designed curriculum that feels lightweight but is really pretty robust. I'd say it's proper to call it the industry standard for delivering off designs to engineering. Here's a quick walkthrough.

What is Zeplin?

Zeplin is a collaboration device for UI designers and front-end developers to help teams with the design hand-off, allowing designers to upload their wireframe designs from Sketch and add them to project folders in Zeplin.

Why should anyone use Zeplin?

One should use Zeplin for the below reasons -

  1. Once you build mockups on the sketch, all you have to do is transport the artboards on Zeplin with the select a single button.
  2. Zeplin provides you to club added artboards into a group and arrange them according to your choice which will be repeated in every other user who is a member of the project.
  3. That being said, various users can run on a project and add comments or bookmark any particular mockup.
  4. It follows version control very effectively and updates mockups accordingly.

How to use Zeplin to automatically generate measures, styles, and assets?

  • Download Zeplin and create an account
    Go over to zeplin.io to build a Zeplin information and connect the Mac app. You get 1 project for free.
  • Start a new project in Zeplin
    Once you've established Zeplin on your Mac, keep your project type.
  • Choose your pixel density
    If you're running with the standard iPhone artboard in Sketch, you're running in 1x.
  • Export your artboard from Sketch to Zeplin
    With the artboard chosen, use the easy-to-remember shortcut to transport the artboard to Zeplin.
  • View your mockup in Zeplin
    In Zeplin you can agree on any element in your plan to get all of its features: position, spacing, color, text styles, etc. They even provide you with a nice "copy" button so you can simply take the exact copy you've written, eliminating any room for error in spelling.
  • Share the specs with your developer
    If you'd like to share a single screen, you can quickly grab a link from the right-hand panel when observing an original screen in Zeplin.

However, I'd suggest going back to the Project Dashboard view in Zeplin, where you can request the developer to the project using their email address.

Those are the basics of Zeplin, and frankly, there's not much difference to it, which is excellent. Try it as a free account and see if it improves your workflow. Zeplin also has a Slack combination that will suggest channels when innovative designs are combined or changed. I've found it to be a bit overkill, but if you're into that sort of thing, then go for it!

If you have any doubt about the above topic. Don’t hesitate to contact us through the below email. Airo Global Software will be your digital partner.

E-mail id: [email protected]

enter image description here

Author - Johnson Augustine
Chief Technical Director and Programmer
Founder: Airo Global Software Inc
LinkedIn Profile: www.linkedin.com/in/johnsontaugustine/