Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    How to add text to the form? TS2339: Property 'fields' does not exist on type 'JSX.IntrinsicElements'.

    SmartClient Version: v12.1p_2021-05-22/LGPL Deployment (built 2021-05-22)

    Chrome Version 101.0.4951.64 (Official Build) (64-bit)

    I have just copied code from documentation and it give me error:
    https://smartclient.com/smartclient-...ss..HeaderItem

    Code:
    <DynamicForm width="300">
        <fields>
            <field defaultValue="Office Supplies" type="header"/>
            <field title="Item" type="text"/>
        </fields>
    </DynamicForm>
    Code:
    src/page/invoicing/tabs/InvoiceAdHocChargesTabLayout.tsx:96:25 - error TS2339: Property 'fields' does not exist on type 'JSX.IntrinsicElements'.
    
    96 <fields>
                               ~~~~~~~~
    
    src/page/invoicing/tabs/InvoiceAdHocChargesTabLayout.tsx:97:29 - error TS2339: Property 'field' does not exist on type 'JSX.IntrinsicElements'.
    
    97 <field defaultValue="Office Supplies" type="header"/>
                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    
    src/page/invoicing/tabs/InvoiceAdHocChargesTabLayout.tsx:98:29 - error TS2339: Property 'field' does not exist on type 'JSX.IntrinsicElements'.
    
    98 <field title="Item" type="text"/>
                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    
    src/page/invoicing/tabs/InvoiceAdHocChargesTabLayout.tsx:99:25 - error TS2339: Property 'fields' does not exist on type 'JSX.IntrinsicElements'.
    
    99 </fields>
                               ~~~~~~~~~
    File where I have added the code:

    Code:
    ///<reference path="../ds/InvoiceAdHocChargeDataSource.ts"/>
    ///<reference path="tabs/InvoiceRecordPriceTab.ts"/>
    
    
    namespace page.invoicing.tabs {
    
        import InvoiceRecordDataSource = page.invoicing.ds.InvoiceRecordDataSource;
    
        import InvoiceAdHocChargeDataSource = page.invoicing.ds.InvoiceAdHocChargeDataSource;
    
    
        export class InvoiceAdHocChargesTabLayout implements core.Layout<isc.IVLayout> {
    
            readonly sc: isc.IVLayout;
    
    
            public _listGridRecords: isc.IListGrid<InvoiceAdHocChargeDataSource.Record>
    
            private _dynamicForm: isc.IDynamicForm<InvoiceAdHocChargeDataSource.Record>;
            private readonly _newFormFields = ["feeCode", "description", "price", "quantity", "vatCode", "remarks"];
    
    
            private readonly _events = {
    
            }
    
            get events() {
                return utils.Callback.publish(this._events)
            }
    
            constructor() {
                this.sc =
                    <VLayout>
                        <HLayout height={30} membersMargin={5} layoutMargin={0}>
                            <LayoutSpacer/>
    
                        </HLayout>
                        {this._listGridRecords =
                            <ListGrid dataSource={InvoiceAdHocChargeDataSource.sc()}
                                      useAllDataSourceFields={false}
                                      autoFetchData={false}
                                      selectionType="single"
                                      showRecordComponents
                                      showRecordComponentsByCell
    
                            >
                                <ListGridField name={"feeCode"}/>
                                <ListGridField name={"description"}/>
                                <ListGridField name={"quantity"}/>
                                <ListGridField name={"price"}/>
                                <ListGridField name={"vat"}/>
                            </ListGrid>
                        }
    
    
                        <DynamicForm width="300">
                            <fields>
                                <field defaultValue="Office Supplies" type="header"/>
                                <field title="Item" type="text"/>
                            </fields>
                        </DynamicForm>
    
    
                        {
    
                            this._dynamicForm =
                                <DynamicForm dataSource={InvoiceAdHocChargeDataSource.sc()} useAllDataSourceFields={true}>
                                    <FormFieldItem name="feeCode"
                                                   required={true}
                                    />
                                    <FormFieldItem name="description"
                                                   required={true}
                                    />
                                    <FormFieldItem name="price"
                                                   required={true}
                                    />
                                    <FormFieldItem name="quantity"
                                                   required={true}
                                    />
                                    <FormFieldItem name="vatCode"
                                                   required={true}
                                    />
                                    <FormFieldItem name="remarks"/>
    
                                </DynamicForm>
                        }
    
                    </VLayout>
            }
    
            showNewForm() {
    
                this._dynamicForm.getFields().forEach((item) => {
                    if (item.name && this._newFormFields.indexOf(item.name) > -1) {
                        item.show()
                    } else {
                        item.hide()
                    }
                })
            }
    
    
        }
    }
    So question - why I am getting this error, or how to add simple text to the form like in documentation example?

    #2
    Found solution:


    Code:
    <HTMLFlow contents={`<span>test</span>`}/>

    Comment


      #3
      Glad you found the solution, however, it's unclear what problem you were having...

      Your initial example does not try to add any plain HTML text, but you report an error, which does not seem to match up to the sample code. What sample code would reproduce that error?

      Comment

      Working...
      X