Tutorial n°3 : Access an SQL Database
Step 10 : Create Front-end for your application #4
To improve the display of the data in your application, you will add some components. First, Drag & Drop an "Attr" component into ListContainer -> ForEach -> ListItem -> Label. Set its "Attr name" property to "class" and its "Attr value" property to "ion-text-wrap". The "title" text will now be displayed entirely without ellipsis.
Now, let's add the authors: To do so, Drag & Drop the "Paragraph" component into the "Label" one.
Click "some text" text under it and click the "Text value" property. Double-click the "SC" button, this will display the NgxComponent Source picker. Click the "Show Iterators on current page Sources" (play) top button, then select the "ForEach" entry on the left panel.
Finally, select "authors" on the right panel and click the [OK] button. You can also change the ListHeader text to display something more accurate and dynamic.
Expand ListHeader -> Label -> Heading -> some list header. Double-click the "SC" button, this will display the NgxComponent Source picker. Click the "Show Forms on current page Sources" top button, then select the "Form #formSample" entry on the left panel. On the right panel, expand controls -> ['c8o_title'] -> value, this is the dynamic text when you type your search in the input field. You can add static Javascript text before and after the dynamic value. Copy "'Search for title that contains: ' + (" in the Prefix field and " || '')" in the Suffix field (this will prevent to display 'null' when the field is empty). Click the [OK] button to validate.
Type some text in the input field and the ListHeader text will change accordingly. Click the [SUBMIT] button to display the new data layout.
And this is it ! You know how to integrate SQL data in your application(s).
Now, let's add the authors: To do so, Drag & Drop the "Paragraph" component into the "Label" one.
Click "some text" text under it and click the "Text value" property. Double-click the "SC" button, this will display the NgxComponent Source picker. Click the "Show Iterators on current page Sources" (play) top button, then select the "ForEach" entry on the left panel.
Finally, select "authors" on the right panel and click the [OK] button. You can also change the ListHeader text to display something more accurate and dynamic.
Expand ListHeader -> Label -> Heading -> some list header. Double-click the "SC" button, this will display the NgxComponent Source picker. Click the "Show Forms on current page Sources" top button, then select the "Form #formSample" entry on the left panel. On the right panel, expand controls -> ['c8o_title'] -> value, this is the dynamic text when you type your search in the input field. You can add static Javascript text before and after the dynamic value. Copy "'Search for title that contains: ' + (" in the Prefix field and " || '')" in the Suffix field (this will prevent to display 'null' when the field is empty). Click the [OK] button to validate.
Type some text in the input field and the ListHeader text will change accordingly. Click the [SUBMIT] button to display the new data layout.
And this is it ! You know how to integrate SQL data in your application(s).
Click to expand...
