Updated on 9/16/2019
Tutorial: Integrate your App with APIs
Call the Modelr and UI Service Flow
Direct link to topic in this publication:

After creating the Modelr flow and the UI service, you call them from the app pages.

Update the weathercard page

  1. Open the weathercard page and double-click the column highlighted below to open its attributes window.

    The column in weathercard page

  2. Create a custom property *ngfor under custom properties and assign it the following value:
  3. let w of weatherdata?.weather; let i = index

    Setting the ngfor property

  4. Open the TS editor of the weathercard page. 
  5. Import the UI service that you created and inject the service in the constructor as weatherservice. Now, you can call the flows in the weather service.
  6. JavaScript
    //Importing the UI service
    import { weatherservice } from '../../sd-services/weatherservice';
    ...
    ...
    //Injecting the weatherservice in the constructor
    constructor(private bdms: NDataModelService,
    public weatherService: weatherservice) {
    super();
    this.mm = new ModelMethods(bdms);
    }

  7. Define the getWeatherModelr function. The flow returns a bh object with output properties. Which in this case, is the local property - currentweather. Set this property to the page's property weatherdata.

    JavaScript
    async getWeatherModelr(cityName) {
    try {
    this.weatherdata = (await this.weatherService.getWeatherModelr(cityName)).local.currentWeather;
    this.processWeather(cityName);
    } catch (e) {
    this.res.emit({
    type: 'error',
    message: typeof e.message === 'string' ? e.message : 'Error Occured While Retrieving the Weather Data.'
    });
    }
    }

Page Implementation

JavaScript
/*DEFAULT GENERATED TEMPLATE. DO NOT CHANGE SELECTOR TEMPLATE_URL AND CLASS NAME*/
import { Component, OnInit, Input, OnChanges, Output } from '@angular/core'
import { ModelMethods } from '../../lib/model.methods';
// import { BDataModelService } from '../service/bDataModel.service';
import { NDataModelService } from 'neutrinos-seed-services';
import { NBaseComponent } from '../../../../../app/baseClasses/nBase.component';
import { weatherservice } from '../../sd-services/weatherservice';
import { EventEmitter } from '@angular/core';
import { logobject } from 'app/models';
/**
* Service import Example :
* import { HeroService } from '../../services/hero/hero.service';
*/

/**
*
* Service Designer import Example - Service Name - HeroService
* import { HeroService } from 'app/sd-services/HeroService';
*/


@Component({
selector: 'bh-weathercard',
templateUrl: './weathercard.template.html'
})

export class weathercardComponent extends NBaseComponent implements OnInit {
mm: ModelMethods;
@Output('log') res: EventEmitter<logobject> = new EventEmitter<logobject>();
weatherdata: any;
localStorage = localStorage;
showCard = false;
constructor(private bdms: NDataModelService,
public weatherService: weatherservice) {
super();
this.mm = new ModelMethods(bdms);
}

ngOnInit() {
}

async getWeatherModelr(cityName) {
try {
this.weatherdata = (await this.weatherService.getWeatherModelr(cityName)).local.currentWeather;
this.processWeather(cityName);
} catch (e) {
this.res.emit({
type: 'error',
message: typeof e.message === 'string' ? e.message : 'Error Occured While Retrieving the Weather Data.'
});
}
}

async processWeather(cityName) {
if (typeof this.weatherdata === 'object' && Object.keys(this.weatherdata).length > 0) {
this.showCard = true;
localStorage.lastCity = cityName;
this.res.emit({
type: 'info',
message: 'Successfully Retrieved the Weather Data for city: ' + cityName
});
} else {
this.showCard = false;
this.res.emit({
type: 'info',
message: 'Weather Data is Empty for city: ' + cityName
});
}
}

}

Update the weathersearch page

  1. Open the weathersearch page.
  2. Double-click the Get weather button to open its attributes window.

    The get weather button

  3. On the click of this button, the app should call the Modelr flow that we created in Create a Flow in Neutrinos Modelr. To do that, add the following value to the (click) property: 
    weatherView.getWeatherModelr(searchString).
  4. Double-click the weathercard view in the weathersearch page and update the log (output) property value to updateLog($event)

    The get weather button

  5. Double-click the log view in the weathersearch page and update the  logArray (Input) property value to logArray.The get weather button
  6. Click the TS tab of the weathersearch page and validate the existing code with the following code:

JavaScript
/*DEFAULT GENERATED TEMPLATE. DO NOT CHANGE SELECTOR TEMPLATE_URL AND CLASS NAME*/
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'
import { ModelMethods } from '../../lib/model.methods';
// import { BDataModelService } from '../service/bDataModel.service';
import { NDataModelService } from 'neutrinos-seed-services';
import { NBaseComponent } from '../../../../../app/baseClasses/nBase.component';
import { HttpClient } from '@angular/common/http';
/**
* Service import Example :
* import { HeroService } from '../../services/hero/hero.service';
*/

/**
*
* Service Designer import Example - Service Name - HeroService
* import { HeroService } from 'app/sd-services/HeroService';
*/

@Component({
selector: 'bh-weathersearch',
templateUrl: './weathersearch.template.html'
})

export class weathersearchComponent extends NBaseComponent {
mm: ModelMethods;
searchString: string;
logArray = [];
constructor(private bdms: NDataModelService,
private http: HttpClient) {
super();
this.mm = new ModelMethods(bdms);
}

updateLog(logObject) {
this.logArray.push(logObject);
}
}

Update the log page

  1. Open the log page. 
  2. Double-click the slide-toggle component to open its attributes window and update the (change) property value to toggleLogVisibility($event).

    The slide toggle button

  3. Double-click the HTML 5- div component to open its attributes window and add the following custom properties: 
    Property Value
    *ngFor let logObj of logArray; let i = index 
    [ngStyle] {'color': logObj.type === 'error' ? 'red' : 'green'} 

    Log attributes

  4. Double-click the HTML Editor of the HTML5-div component and add the following code: 
    {{'- ' + logObj.message}}
    The HTML editor
  5. Open the TS tab of the log page and update the page implementation to the following:

    JavaScript
    /*DEFAULT GENERATED TEMPLATE. DO NOT CHANGE SELECTOR TEMPLATE_URL AND CLASS NAME*/
    import { Component, OnInit, Input } from '@angular/core'
    import { ModelMethods } from '../../lib/model.methods';
    // import { BDataModelService } from '../service/bDataModel.service';
    import { NDataModelService } from 'neutrinos-seed-services';
    import { NBaseComponent } from '../../../../../app/baseClasses/nBase.component';

    /**
    * Service import Example :
    * import { HeroService } from '../../services/hero/hero.service';
    */

    /**
    *
    * Service Designer import Example - Service Name - HeroService
    * import { HeroService } from 'app/sd-services/HeroService';
    */

    @Component({
    selector: 'bh-log',
    templateUrl: './log.template.html'
    })

    export class logComponent extends NBaseComponent implements OnInit {
    mm: ModelMethods;
    @Input()logArray = [];
    showLog = true;
    constructor(private bdms: NDataModelService) {
    super();
    this.mm = new ModelMethods(bdms);
    }

    ngOnInit() {

    }

    toggleLogVisibility(event) {
    this.showLog = event.checked;
    }
    }