SmartComponent Library NG
  1. Components
  2. SmartFormComponent

File

src/ui/form/smart-form.component.ts

Implements

OnInit OnChanges OnDestroy

Metadata

selector smart-form
styleUrls ./smart-form.component.css
templateUrl ./smart-form.component.html
viewProviders DataSourceRegistry SmartViewManagerService SmartFormInstanceService SmartToolbarRegistry SmartViewerRegistryService SmartTabFolderRegistryService SmartFrameRegistryService SmartGridRegistryService

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Constructor

constructor(injector: Injector)
Parameters :
Name Type Optional
injector Injector No

Inputs

component-type
Type : any
smart-form-layout
Type : any
viewReference
Type : ViewRef

Outputs

componentRefChange
Type : EventEmitter<ComponentRef<any>>
onDataSourceAdded
Type : EventEmitter<SmartDataSource>
onReady
Type : EventEmitter<FormReadyEvent>
viewLoaded
Type : EventEmitter<ViewRef>

HostBindings

attr.kendoRippleContainer
Type : RippleContainerDirective

Methods

Public addFormChild
addFormChild(item)
Parameters :
Name Optional
item No
Returns : void
Public checkForTooTallElements
checkForTooTallElements(column)
Parameters :
Name Optional
column No
Returns : void
Public checkIfAllChildrenLoaded
checkIfAllChildrenLoaded()
Returns : boolean

boolean
Public checkIfStacked
checkIfStacked()
Returns : boolean
checkTabFolders
checkTabFolders()
Returns : void
Public closeWindow
closeWindow()

Closes the floating window, if the Smart Form has been rendered in one

Returns : void
Public componentLoaded
componentLoaded(instanceName: string, componentInstance: AbstractFormChild)
Parameters :
Name Type Optional
instanceName string No
componentInstance AbstractFormChild No
Returns : void
Public composeFormStretchInfo
composeFormStretchInfo(container)
Parameters :
Name Optional
container No
Returns : void
Public computeContainerStretchInfo
computeContainerStretchInfo(container)
Parameters :
Name Optional
container No
Returns : void
Public computeFormChildren
computeFormChildren()
Returns : void
Public computeFormItemPadding
computeFormItemPadding(elem: HTMLElement)
Parameters :
Name Type Optional
elem HTMLElement No
Returns : any
Public Async computeHeights
computeHeights()
Returns : any
Public Async computeHeightsInWindow
computeHeightsInWindow()
Returns : any
getCurrentViewInjector
getCurrentViewInjector()
Returns : Injector

Injector
Public getElementHeightFromInstanceName
getElementHeightFromInstanceName(instanceName: string)
Parameters :
Name Type Optional Description
instanceName string No

The instance name of the Form Item.
Returns : number

The height of the Smart Form Item, including padding.
getFormDatasource
getFormDatasource(datasourceName: string)
Parameters :
Name Type Optional
datasourceName string No
Returns : SmartDataSource

SmartDataSource
getFormDatasourceAsObservable
getFormDatasourceAsObservable(datasourceName: string)
Parameters :
Name Type Optional
datasourceName string No
Returns : Observable<SmartDataSource>
Public getInstanceFromName
getInstanceFromName(name: string)
Parameters :
Name Type Optional
name string No
Returns : AbstractFormChild

AbstractFormChild
Public getWrapperContainer
getWrapperContainer(element: HTMLElement)
Parameters :
Name Type Optional
element HTMLElement No
Returns : HTMLElement
Public handleChildLayoutChanged
handleChildLayoutChanged()

Re-calculates the heights for stretch-mode and re-evaluates the flex direction for form columns

Returns : void
handleComponentTypeChange
handleComponentTypeChange(newCmpType: any)
Parameters :
Name Type Optional
newCmpType any No
Returns : boolean

boolean
init
init()
Returns : void
setComponentType
setComponentType(cmpType)
Parameters :
Name Optional
cmpType No
Returns : void
Public setFlexDirection
setFlexDirection()
Returns : void
setFormConfiguration
setFormConfiguration(layout: string | SmartFormConfiguration)
Parameters :
Name Type Optional
layout string | SmartFormConfiguration No
Returns : void
Public setFormHeight
setFormHeight(formElement: HTMLElement)
Parameters :
Name Type Optional
formElement HTMLElement No
Returns : void
Public setHeightsOnContainer
setHeightsOnContainer(container)
Parameters :
Name Optional
container No
Returns : void
setUpdateMode
setUpdateMode(value: boolean)
Parameters :
Name Type Optional
value boolean No
Returns : void
setViewRef
setViewRef(viewRef: ViewRef)
Parameters :
Name Type Optional
viewRef ViewRef No
Returns : void
Public setWindowState
setWindowState(state: WindowState)

Sets the floating window state, if the Smart Form has been redered in one

Parameters :
Name Type Optional
state WindowState No
Returns : void
setWindowTitle
setWindowTitle()
Returns : void
Public updateToStackFormConfiguration
updateToStackFormConfiguration()
Returns : void

Properties

breadcrumbInstance
Type : SmartBreadCrumbNavigationComponent
columnWidthCssClass
Type : string
container
Type : ViewRef
Decorators :
@ViewChild('container', {read: ViewRef, static: true})
containerSize
Type : WindowSize
containerVcRef
Type : ViewContainerRef
Decorators :
@ViewChild('container', {read: ViewContainerRef, static: true})
flexDirection
Type : string
floatingWindowTitleBarTemplate
Type : TemplateRef<any>
Decorators :
@ViewChild('floatingWindowTitleBar', {read: TemplateRef})
Public formChildren
Type : string[]
Default value : []
formConfiguration
Type : SmartFormConfiguration
formConfigurationStacked
Type : SmartFormConfiguration
formDomElement
Type : ElementRef
Decorators :
@ViewChild('container', {read: ElementRef})
Public formHeight
Type : number
formIconUrl
Type : SafeResourceUrl
formIsStacked
Type : boolean
formSize
Type : string
formTitle
Type : string
Public injector
Type : Injector
inUpdateMode
Type : EventEmitter<boolean>
Default value : new EventEmitter<boolean>()
Public loadedChildren
Type : literal type[]
Default value : []
maxNonStretchHeight
Type : number
Default value : 0
Public nonStretchHeight
Type : number
Public rippleContainerHeight
Type : number
rootView
Type : ViewContainerRef
Decorators :
@ViewChild('root', {read: ViewContainerRef})
screenService
Type : SmartScreenService
Public stretchableCount
Type : number
Public stretchElemHeight
Type : number
templatePlaceholders
Type : QueryList<SmartFormPlaceholderDirective>
Decorators :
@ViewChildren(SmartFormPlaceholderDirective)
windowSizeChanged
Default value : _.debounce(() => { this.allLoaded = this.checkIfAllChildrenLoaded(); if (this.allLoaded) { if ( this.formConfiguration && this.formConfiguration.settings.stretchMode ) { this.formConfigurationStacked = _.cloneDeep( this.formConfiguration ); if (this.checkIfStacked()) { this.updateToStackFormConfiguration(); } this.computeHeights(); } } }, 500)

Accessors

instanceId
getinstanceId()
Returns : string
enableRippleEffect
getenableRippleEffect()
Returns : boolean
isChildActive
getisChildActive()
Returns : boolean
windowHelperService
getwindowHelperService()

The floating window helper service assigned to this form instance if it has been rendered in a floating window. null otherwise.

Returns : FloatingWindowHelperService | null 

    <div #container>
        <div 
            #root
            *ngIf="!!formConfiguration" 
            kendoRippleContainer
            [disabled]="!enableRippleEffect"
            [ngClass]="formConfiguration.settings.classList" 
            [ngStyle]="formConfiguration.settings.style">
                <ng-container *ngIf="!isChildActive">
                    <!-- data sources configuration -->
                    <smart-data-source
                        *ngFor="let datasource of formConfiguration.dataSources"
                        [smart-server-side-filtering]="datasource.serverSideFiltering"
                        [smart-server-side-sorting]="datasource.serverSideSorting"
                        [smart-instance-name]="datasource.instanceName"
                        [smart-object-name]="datasource.objectName"
                        [smart-business-entity-name]="datasource.entityName"
                        [smart-entity-table]="datasource.tableRef"
                        [smart-entity-view]="datasource.entityView"
                        [smart-filter]="datasource.initialFilter || datasource.smartFilter"
                        [smart-sort]="datasource.initialSort"
                        [smart-data-source]="datasource.parentDataSource"
                        [smart-foreign-fields]="datasource.foreignFields"
                        [smart-navigation-source]="datasource.navigationSource"
                        [use-initial-values]="datasource.useInitialValues"
                        [smart-filter-source]="datasource.filterSource"
                        [smart-auto-fetch]="datasource.autoFetch"
                        [smart-partial-dataset]="datasource.partialDataset">
                    </smart-data-source>

                    <ng-container *ngIf="!!formConfiguration.rows && !formConfiguration.columns">
                        <div class="container-fluid">
                        <div class="row smart-form-row" *ngFor="let row of formConfiguration.rows">
                            <FormColumn
                                *ngFor="let column of row.items"
                                [class]="column.widthClass"
                                [formItems]="[column]">
                            </FormColumn>
                        </div>
                        </div>
                    </ng-container>
                    <ng-container *ngIf="!!formConfiguration.columns && !formConfiguration.rows">
                        <div class="container-fluid">
                        <div class="row smart-form-row" [ngStyle]="{ flexDirection: flexDirection ? flexDirection : 'row', display: 'flex' }" >
                            <FormColumn 
                                *ngFor="let column of formConfiguration.columns" 
                                [class]=" flexDirection === 'column' ? 'w-100' : columnWidthCssClass" 
                                [formItems]="column.items">
                            </FormColumn>
                        </div>
                        </div>
                    </ng-container>
            </ng-container>
            <smart-form-outlet *ngIf="isChildActive"></smart-form-outlet>    
        </div>   
    </div>

    <ng-template #floatingWindowTitleBar let-win>
        <div class="k-window-title">
            <img *ngIf="formIconUrl" class="form-window-icon" [src]="formIconUrl">
            <span [ngStyle]="{ marginLeft: formIconUrl ? '20px' : 'inherit' }">
                {{formTitle}}
            </span>
        </div>
        <div class="k-window-actions">
            <button
                (click)="setWindowState('minimized')"
                [hidden]="windowHelperService.windowRef.window.instance.state === 'minimized'"
                class="k-button-icon k-button k-bare" 
                role="button" 
                title="Minimize" 
                aria-label="Minimize" 
                aria-disabled="false" dir="ltr" type="button" 
                style="display: inline-flex;">
                    <span class="k-icon k-i-window-minimize" role="presentation"></span>
            </button>
            <button
                [hidden]="windowHelperService.windowRef.window.instance.state === 'minimized' || windowHelperService.windowRef.window.instance.state === 'maximized'"
                (click)="setWindowState('maximized')"
                class="k-button-icon k-button k-bare" 
                role="button" 
                title="Maximize" 
                aria-label="Maximize" 
                aria-disabled="false" dir="ltr" type="button" 
                style="display: inline-flex;">
                    <span class="k-icon k-i-window-maximize" role="presentation"></span>
            </button>
            <button
                [hidden]="!(windowHelperService.windowRef.window.instance.state === 'minimized' || windowHelperService.windowRef.window.instance.state === 'maximized')"
                (click)="setWindowState('default')"
                class="k-button-icon k-button k-bare" 
                role="button" 
                title="Restore" 
                aria-label="Restore" 
                aria-disabled="false" dir="ltr" type="button" 
                style="display: inline-flex;">
                    <span class="k-icon k-i-window-restore" role="presentation"></span>
            </button>
            <button
                (click)="closeWindow()"
                class="k-button-icon k-button k-bare" 
                role="button" 
                title="Close" 
                aria-label="Close" 
                aria-disabled="false" dir="ltr" type="button" 
                style="display: inline-flex;">
                    <span class="k-icon k-i-close" role="presentation"></span>
            </button>
        </div>
    </ng-template>

./smart-form.component.css 

::ng-deep FormItem {
    padding-left: 5px !important;
    padding-right: 5px !important;
    display: block;
}

::ng-deep .k-ripple-container {
    padding: 10px 0px;
}

::ng-deep .container-fluid > .row.smart-form-row  {
    display: block;
    flex-direction: unset;
}
::ng-deep .container-fluid > .row.smart-form-row > formcolumn  {
    overflow-y: auto !important;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""