# How to build a Dynamic Page

**URL:** <https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025>\
**Category:** Ignition\
**Created:** [February 20, 2012, 7:19am UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025 "2012-02-20T07:19:28Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![ecujak](https://avatars.discourse-cdn.com/v4/letter/e/839c29/32.png) [@ecujak](https://forum.inductiveautomation.com/u/ecujak)\
**Post date:** [February 20, 2012, 7:19am UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/1 "2012-02-20T07:19:28Z")

</div>

Let’s say we have some filter options at the top of a page, that I already know how to create. Based on the criteria of the filters I want to return a line item for each record meeting that criteria. I want to be able to have buttons and other record related info printed within each line.

ex:  
For each record, print a new line with button to toggle Boolean Value record item, dropdown list to edit text value item, edit button that will allow edit of other items for this one record.

How to I code this? Will I have to use Java or Jython?  
I would be thankful if anyone can post some different examples of how to do this.

---

<div class="post-metadata">

**Author:** ![Greg.Buehler](https://avatars.discourse-cdn.com/v4/letter/g/ecc23a/32.png) [@Greg.Buehler](https://forum.inductiveautomation.com/u/Greg.Buehler)\
**Post date:** [February 20, 2012, 2:37pm UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/2 "2012-02-20T14:37:33Z")

</div>

Figure out the maximum number of items you want on a “page”, and create default elements for them. Using scripting, you can then toggle the visibility of unused controls, and move the visable ones on their y axis to fit in a nice column.

code would look something like

```auto
# keep track of the top position
top = 0

# iterate through all the "elements"
for x in range(20)
    element = event.parent.getComponent("element_%02d" % x)
    element.visible = app.yourscript.checkVisable(x) # this is some script for your business logic

    # reapply a new layout
    if element.visable:
        top = top + element.getHeight() + 2
        pos_x = element.getX()
        element.setLocation(pos_x, top)

        # change any sub components for that element here

    window.revalidate()
```

---

<div class="post-metadata">

**Author:** ![ecujak](https://avatars.discourse-cdn.com/v4/letter/e/839c29/32.png) [@ecujak](https://forum.inductiveautomation.com/u/ecujak)\
**Post date:** [February 20, 2012, 8:30pm UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/3 "2012-02-20T20:30:07Z")

</div>

This is great info, but I am still missing a lot. Can you give me an example of how to implement this?

Let’s say i have a tableA with four fields each record [Id (PK, int, auto increment),Text1(varchar(50), Text2(varchar(50), Text3(varchar(50) Bool1(bit)]

Can you show me an example that will print 10 records on a page at once, with each line showing The Id, Text1, Text2, Bool1 and a button to toggle bool1, and a button to allow an edit for Text1 and Text2?

Or something with similar functionality of the image attached.

 ![](https://us1.discourse-cdn.com/inductiveautomation/original/1X/03b63f22583490c4009cab117d4008c673aaeee6.jpg)

---

<div class="post-metadata">

**Author:** ![Greg.Buehler](https://avatars.discourse-cdn.com/v4/letter/g/ecc23a/32.png) [@Greg.Buehler](https://forum.inductiveautomation.com/u/Greg.Buehler)\
**Post date:** [February 20, 2012, 8:54pm UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/4 "2012-02-20T20:54:25Z")

</div>

Ok, this is even easier.

You just need to setup the table source to use the parameters in the controls. You do some scripting on the table events for the validation events that do update queries to your database depending on what row/column the event came from.

---

<div class="post-metadata">

**Author:** ![ecujak](https://avatars.discourse-cdn.com/v4/letter/e/839c29/32.png) [@ecujak](https://forum.inductiveautomation.com/u/ecujak)\
**Post date:** [February 20, 2012, 9:16pm UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/5 "2012-02-20T21:16:14Z")

</div>

I am sure it will be easy to expand on once seeing a basic example. I know there are a lot of swing packages that will help as well. I just don’t know how to set this up inside the ignition windows.

Will someone please give me a windowexport with a small example of how to get this kind of thing started?

[jython.org/jythonbook/en/1.0 … tions.html](http://www.jython.org/jythonbook/en/1.0/GUIApplications.html)  
[docs.oracle.com/javase/1.5.0/doc … mmary.html](http://docs.oracle.com/javase/1.5.0/docs/api/javax/swing/package-summary.html)

---

<div class="post-metadata">

**Author:** ![ecujak](https://avatars.discourse-cdn.com/v4/letter/e/839c29/32.png) [@ecujak](https://forum.inductiveautomation.com/u/ecujak)\
**Post date:** [February 20, 2012, 9:37pm UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/6 "2012-02-20T21:37:04Z")

</div>

When working with the Windows I see the code below will allow you to change characterisics of existing items like this HeaderLabel. But how can I dynamically create my own components in a window?

```auto
try:
   window = system.gui.getWindow("Overview")
   label = window.rootContainer.getComponent("HeaderLabel")
   label.text = "Notice Me!"
   label.foreground = (255,0,0)
except ValueError:
   # ignore error with a pass keyword
   pass
```

---

<div class="post-metadata">

**Author:** ![ecujak](https://avatars.discourse-cdn.com/v4/letter/e/839c29/32.png) [@ecujak](https://forum.inductiveautomation.com/u/ecujak)\
**Post date:** [February 20, 2012, 9:48pm UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/7 "2012-02-20T21:48:36Z")

</div>

Is this where I would use a Paintable canvas?

[inductiveautomation.com/supp … canvas.htm](http://www.inductiveautomation.com/support/usermanuals/ignition/index.html?misc_pmipaintablecanvas.htm)

[inductiveautomation.com/supp … \_types.htm](http://www.inductiveautomation.com/support/usermanuals/ignition/index.html?event_types.htm)

---

<div class="post-metadata">

**Author:** ![ecujak](https://avatars.discourse-cdn.com/v4/letter/e/839c29/32.png) [@ecujak](https://forum.inductiveautomation.com/u/ecujak)\
**Post date:** [February 21, 2012, 3:26pm UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/8 "2012-02-21T15:26:54Z")

</div>

Bump… ![:prayer:](https://us1.discourse-cdn.com/inductiveautomation/original/1X/e5a7e3b63facc151ea73e3b45db7bdb3d4bdc316.gif ":prayer:")

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [February 21, 2012, 7:51pm UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/9 "2012-02-21T19:51:11Z")

</div>

Sorry, ecujak, came off of a 20 hour work day, and switch to second shift for a bit-- my sleep pattern’s all all jacked up at the moment.

I had started on an example, but haven’t had much time to work on it. I hate it when work gets in the way! 😆

---

<div class="post-metadata">

**Author:** ![ecujak](https://avatars.discourse-cdn.com/v4/letter/e/839c29/32.png) [@ecujak](https://forum.inductiveautomation.com/u/ecujak)\
**Post date:** [February 21, 2012, 8:00pm UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/10 "2012-02-21T20:00:45Z")

</div>

JordanCClark, thanks for coming to my rescue again. I appreciated your help last time around.

---

<div class="post-metadata">

**Author:** ![ecujak](https://avatars.discourse-cdn.com/v4/letter/e/839c29/32.png) [@ecujak](https://forum.inductiveautomation.com/u/ecujak)\
**Post date:** [February 22, 2012, 8:46pm UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/11 "2012-02-22T20:46:29Z")

</div>

Colby.Clegg, Travis.Cox, Carl.Gould, Robert.McKenzie, nathan, Kevin.Herron… someone please help.

---

<div class="post-metadata">

**Author:** ![Travis.Cox](https://avatars.discourse-cdn.com/v4/letter/t/b9bd4f/32.png) [@Travis.Cox](https://forum.inductiveautomation.com/u/Travis.Cox)\
**Post date:** [February 22, 2012, 10:06pm UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/12 "2012-02-22T22:06:01Z")

</div>

One way to achieve this is by using the table component. Bind the data property of the table to a SQL query that returns a row for each item you want displayed. Once the data is displayed you can go into the table customizer to mark the columns you want the user to edit as editable. When editing, to get dropdown lists you just need to setup translation lists on the appropriate columns. When the user edits the cell it fires a cellEdited event on the table which you can respond to to run an update query to your database.

You may want to call our tech support to help you get started.

---

<div class="post-metadata">

**Author:** ![diat150](https://avatars.discourse-cdn.com/v4/letter/d/a587f6/32.png) [@diat150](https://forum.inductiveautomation.com/u/diat150)\
**Post date:** [February 23, 2012, 12:19am UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/13 "2012-02-23T00:19:39Z")

</div>

weve made some dynamic tables and easy charts that only load enabled or existing tags for or devices. They also check to see if alarming is enabled which allows setpoints to be displayed along with cell backgrounds highlighted on alarm conditions. Like Travis said, use the cell edited to fire off the update query. The tables are very powerful with the right person behind the keyboard!!!(not me most of the time!)

---

<div class="post-metadata">

**Author:** ![ecujak](https://avatars.discourse-cdn.com/v4/letter/e/839c29/32.png) [@ecujak](https://forum.inductiveautomation.com/u/ecujak)\
**Post date:** [February 23, 2012, 3:16pm UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/14 "2012-02-23T15:16:27Z")

</div>

Ok, let me give the table component another go. I wouldn’t mind seeing some examples of formatting to make the table look and feel less like a table. Thanks for now. I am not the right person behind the keyboard for now, but hope to be soon. 😒

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [February 25, 2012, 6:04am UTC](https://forum.inductiveautomation.com/t/how-to-build-a-dynamic-page/4025/15 "2012-02-25T06:04:10Z")

</div>

Okay, finally found some time…

All done with with no tables-- well there’s one at the bottom, but it’s just a monitor for the dataset so you can see the changes as they happen. 🙂

The dataset has 26 entries so you can how it displays an uneven number of full pages.

Methinks that either an editable table or a table with a data entry popup would have been quicker. 😆  
[DataEntryWindow.vwin](https://us1.discourse-cdn.com/inductiveautomation/original/1X/5338e63c6e52cc1804c67fda3f74a140dcfdd1a5.vwin) (64.2 KB)

 ![](https://us1.discourse-cdn.com/inductiveautomation/original/1X/2e28a890d9460ba55b6562cd2f247a6cfec37474.png)