react-xml-ui

'react-xml-ui' is designed to dynamically generate readonly forms using any XML or ISO 20022 messages. This versatile UI library is perfect for creating ISO 20022 or MX compliant forms without the need for manual coding, making it easy to present complex financial messages in a clear, user-friendly format. Ideal for applications that require displaying structured data as part of ISO 20022 or MX workflows, ngx-xml-message ensures efficient and dynamic form rendering.

Features

  • Automatic React forms generation
  • Supports ISO 20022 messages

How to consume

npm i react-xml-ui

How to consume

                        
                            import { ReactXmlUI } from 'react-xml-ui';

                            function App() {
                            const [xmlMessage, setXmlMessage] = useState('')

                            useEffect(()=>{
                                setXmlMessage(message);
                            },[xmlMessage])
                            return (
                                <>
                                <ReactXmlUI xmlString={xmlMessage}></ReactXmlUI>
                                </>
                            )
                            }

                            export default App
                        
                    
Sample XML
                        
                            <?xml version="1.0" encoding="UTF-8"?>
                            <Document xmlns="urn:iso:std:iso:20022:tech:xsd:camt.053.001.09">
                                <Hdr>
                                    <MsgId>ABC-123456</MsgId>
                                    <CreDtTm>2023-06-20T09:30:00Z</CreDtTm>
                                </Hdr>
                                <Rpt>
                                    <Id>ACC-78901234</Id>
                                    <ElctrncSeqNb>1</ElctrncSeqNb>
                                    <FrToDt>
                                        <FrDtTm>2023-06-01T00:00:00Z</FrDtTm>
                                        <ToDtTm>2023-06-30T23:59:59Z</ToDtTm>
                                    </FrToDt>
                                    <Acct>
                                        <Id>
                                            <IBAN>GB99X12345678901234567</IBAN>
                                        </Id>
                                    </Acct>
                                    <Bal>
                                        <Tp>
                                            <CdOrPrtry>
                                                <Cd>PRCD</Cd>
                                            </CdOrPrtry>
                                        </Tp>
                                        <Amt Ccy="EUR">100000.00</Amt>
                                        <CdtDbtInd>CRDT</CdtDbtInd>
                                    </Bal>
                                    <Bal>
                                        <Tp>
                                            <CdOrPrtry>
                                                <Cd>CLBD</Cd>
                                            </CdOrPrtry>
                                        </Tp>
                                        <Amt Ccy="EUR">2000.00</Amt>
                                        <CdtDbtInd>DBIT</CdtDbtInd>
                                    </Bal>
                                    <Ntry>
                                        <Amt Ccy="EUR">1000.00</Amt>
                                        <CdtDbtInd>CRDT</CdtDbtInd>
                                        <Sts>BOOK</Sts>
                                        <BookgDt>
                                            <Dt>2023-06-05</Dt>
                                        </BookgDt>
                                        <ValDt>
                                            <Dt>2023-06-05</Dt>
                                        </ValDt>
                                        <AcctSvcrRef>XYZ-987654</AcctSvcrRef>
                                        <NtryDtls>
                                            <TxDtls>
                                                <Refs>
                                                    <EndToEndId>XYZ-123456</EndToEndId>
                                                </Refs>
                                                <AmtDtls>
                                                    <TxAmt>
                                                        <Amt Ccy="EUR">1000.00</Amt>
                                                    </TxAmt>
                                                </AmtDtls>
                                                <RltdPties>
                                                    <Dbtr>
                                                        <Nm>John Doe</Nm>
                                                        <Id>
                                                            <PrvtId>
                                                                <Othr>
                                                                    <Id>1234567890</Id>
                                                                </Othr>
                                                            </PrvtId>
                                                        </Id>
                                                    </Dbtr>
                                                    <Cdtr>
                                                        <Nm>Company XYZ</Nm>
                                                    </Cdtr>
                                                </RltdPties>
                                                <RmtInf>
                                                    <Ustrd>Payment for services rendered Payment for services rendered Payment for services rendered</Ustrd>
                                                </RmtInf>
                                            </TxDtls>
                                        </NtryDtls>
                                    </Ntry>
                                    <!-- Additional Ntry elements can be added for more transactions -->
                                </Rpt>
                            </Document>