Service base component

Components extending the OServiceBaseComponent class are components which have a service instance configured ready for ask for remote data. This class provides a set of inputs and methods and attributes inherited by all the service components. This properties are explained on the API section of this page.

For using the OntimizeService configuration (explained here) and have a unique instance of it in your component you shoud add it in the providers definition, as you can see in the following example. The class inputs are available in the static DEFAULT_INPUTS_O_SERVICE_BASE_COMPONENT variable, so a component implementing OServiceBaseComponent class will look like:

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.scss'],
  inputs: [
    ...OServiceBaseComponent.DEFAULT_INPUTS_O_SERVICE_BASE_COMPONENT,
    // more component inputs
  ],
  outputs: [
    // component ouputs
  ],
  providers: [
    { provide: OntimizeService, useFactory: dataServiceFactory, deps: [Injector] }
  ]
})
export class MyComponent extends OServiceBaseComponent {

}

Binding to remote data

To manage server data, it is necessary to configure the service and the entity attributes. You may need configure the service-type attribute in case you don’t use the default OntimizeWebService to manage. For more information see in App configuration.

Binding to local data

For local data binding you simply need to supply an array of TypeScript objects/JSON via the static-data property. Adicional, you need to set query-on-init="false" in o-table component.

If you need the data query to be performed after the parent-keys is updated, query-on-init = false and query-on-bind = true must be changed

Define columns

You have to define the columns of the database entity (if binding to remote data) or the properties of the static data items (when binding to local data).

CRUD methods

There are a set of preconfigured method names for doing the CRUD operations that can be overrided using its inputs: query-method, paginated-query-method, insert-method, update-method or delete-method. You can learn more about Ontimize services configuration here.

This are the methods that will be invoked when the component needs to query, insert, update or delete data from its configured service and entity.

Parent keys filter

When a service component is inside a form component you can configure the parent-keys attribute of the with the attr of the form fields you want to include in the query filtering.

Keep in mind that a service component will not send any request when the parent keys values are all null. You can configure the query-with-null-parent-keys to avoid that, but it is not always recommended, it might query for too many data.

Storing component state

Using the store-state boolean input allows user to choose whether or not to store the component configuration state in local storage. That state is returned by the getDataToStore method under the key returned in getComponentKey callback.

Class: OServiceBaseComponent

Inputs

Name Description Default

attr

string

Field identifier. Registry property if component is inside a form.

columns

string

Entity columns. Separated by ‘;’

delete-method

string

Service method name for deletions

delete

entity

string

Service entity name

insert-method

string

Service method name for insertions

insert

keys

string

Entity keys. Separated by ‘;’

pageable

no | false | yes | true

Indicates whether or not to do paginated queries for getting the data

no

paginated-query-method

string

Service method name for paginated queries

advancedQuery

parent-keys

string

Form field attributes used for filtering the table data. Separated by ‘;’. It is possible to use alias on the following way: tableCol1:fk1;tableCol2:fk2 where tableCol1 and tableCol2 are table columns and fk1 and fk2 are attributes from form fields.

query-method

string

Service method name for queries

query

query-on-bind

no | false | yes | true

Query table data on bind

yes

query-on-event

A component event reference the component must listen to in order to perform its query

query-on-init

no | false | yes | true

Query table data on init

yes

query-rows

number

Number of records by page. Initial number of registries in queries when using pagination in server side

10

query-with-null-parent-keys

no | false | yes | true

Indicates whether or not to trigger query method when the filter generated from parent-keys is null. The use of this attribute is not recommended when the component may request a big amount of information

no

service

string

JEE service path

service-type

string

Injection token indicated in the provider of the service

static-data

array

Static data for filling the table

store-state

no | false | yes | true

Indicates whether or not to store component state

yes

update-method

string

Service method name for updates

update

* required inputs.

Methods

afterViewInit
Method for inputs and listeners parsing that must be called inside ngAfterViewInit
configureService
Method needed for Ontimize service initialization, already called in initialize method
destroy
Method for unsuscribing listeners that must be called inside ngOnDestroy
extractKeysFromRecord
Extracting the given record keys properties
Parameters
record: any
Returns
Object
getAttribute
Returns component attr, used as identifier
Returns
string
getAttributesValuesToQuery
Returns a list of attributes to be queried. This list includes the columns array and the keys array
Returns
string[]
getComponentKey
Returns component identifier for state storage, attr value by default
Returns
string
getDataArray
Returns component data array
Returns
any[]
getDataToStore
Method returning component data that will be stored as its state
Returns
any
getKeys
Returns parsed keys input ass array
Returns
string[]
getQueryArguments
Returns the array of arguments needed for making a query
Parameters
Returns
any[]
getSqlTypes
Getting stored sql types
Parameters
getTotalRecordsNumber
Returns total number of records if the component is paginated
Returns
number
initialize
Method for inputs and listeners initialization that must be called inside ngOnInit
onLanguageChangeCallback
Callback for app locale change, receiving the selected locale as parameter
Parameters
lang: string
queryData
Parameters
setDataArray
Parameters
setFormComponent
Setting parent form reference, already called in initialize method
Parameters
form: OFormComponent
updatePaginationInfo
Updating pagination internal information, only if the component is pageable
Parameters
queryResponse: any

Updated: