Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


In a Perspective Table component, you have the option to enable subviews. When a subview is set up, you can click on the Expand icon in the table and have another view be displayed without closing the first view. This example sets up a table with several cities and statistics. When the Expand icon is selected for a city, a Map component will be displayed showing the location of the city on the map. 

This example focuses on using a map component in a subview on the table, but the larger implication here is that subviews in table rows can receive values from each row in the table, and utlizie them with property bindings, allowing each subview to contain data unique to from the row. The image below shows what our finished view will look like.


On this page ...


Create a View for the Table Data

We'll start by creating a view that will contain the table. 

  1. Right click on Views to create a view.  In the example, we named ours CityStats. Set it as a Coordinate layout and check the Page URL option if you want to create a page for this view (you can always add a page later if you want to). 

  2. Drag a Table component onto the view. 
  3. The table needs to have Latitude and Longitude data for the map to show that location. Highlight and copy the following data:

     Click here to view the data...
    [
      {
        "city": "Folsom",
        "country": "United States",
        "population": 77271,
        "lat": 38.678287,
        "lng": -121.177318
      },
      {
        "city": "Jakarta",
        "country": "Indonesia",
        "population": 10187595,
        "lat": -6.208404,
        "lng": 106.849087
      },
      {
        "city": "Madrid",
        "country": "Spain",
        "population": 3233527,
        "lat": 40.41498,
        "lng": -3.702002
      },
      {
        "city": "Prague",
        "country": "Czech Republic",
        "population": 1241664,
        "lat": 50.073453,
        "lng": 14.450091
      },
      {
        "city": "San Diego",
        "country": "United States",
        "population": 1406630,
        "lat": 32.713832,
        "lng": -117.158616
      },
      {
        "city": "San Francisco",
        "country": "United States",
        "population": 884363,
        "lat": 37.776379,
        "lng": -122.423501
      },
      {
        "city": "Shanghai",
        "country": "China",
        "population": 24153000,
        "lat": 31.227167,
        "lng": 121.498839
      },
      {
        "city": "Tokyo",
        "country": "Japan",
        "population": 13617000,
        "lat": 35.69042,
        "lng": 139.746457
      },
      {
        "city": "Washington, DC",
        "country": "United States",
        "population": 658893,
        "lat": 38.90598,
        "lng": -77.04882
      },
      {
        "city": "Wellington",
        "country": "New Zealand",
        "population": 405000,
        "lat": -41.284336,
        "lng": 174.770488
      }
    ]
  4. Right click on the data property of the Table component and select Paste.


  5. Your table will now display the data for 10 rows and 5 columns.



  6. Next, enable the subview property under props.rows. 



  7. The table now has Expand  icons for each row.


Create a View for Displaying the Map

Next we'll make the view that will be display a map of the cities in our table. 

  1. In the Project Browser, right click on Views to create a view. Name the new view CityMaps. Set it as a Flex layout, so the map easily takes up all available space. Lastly, do not check the Page URL option, as we don't need a corresponding page. 



  2. Drag a Map component onto the CityMaps View.

  3. Set the Map's Grow property to "1" so it resizes to take up the entire view.

  4. Click on the CityMaps view in the Project Browser. In the Property Editor, click the Add View Parameter link under Params and choose Object.
  5. Double click on key, and enter value as the object name.

    You must use "value" as the object name when setting up these view parameters. The Table component is designed specifically to look for a property named "value" when passing values into any embedded subviews. 

  6. Next, we'll add two parameters to that value object. 
    1. Click Add Object Member link under Params and choose Value. 



    2. Double click on key, and enter "lat". This matches the lat (latitude) column from the Table on the CityStats view. This name must exactly match the column name in the table.
    3. Click the Add Object Member icon next to value and choose Value.
    4. Double click on key, and enter "lng". This matches the lng (longitude) column from the Table on the CityStats view. This name must exactly match the column name in the table.



  7. Next select the Map component. We need to set the map's initial geographic center to the view parameters. In the Property Editor, expand the init.center property. 
    1. Click on the Binding  icon next to the lat property. 
    2. On the Edit Binding screen, select Property as the binding type.
    3. Click the Browse Properties  icon. Navigate to view, the params, the value, and then the lat property. 
    4. Click OK, then click OK again to save the binding.

      At this point, the init.center.lat property is bound to view.params.value.lat where view.params.value.lat's value is "value" instead of a valid latitude number. This will cause a Component Error which is expected. 

    5. Click on the Binding  icon next to the lng property. 
    6. On the Edit Binding screen, select Property as the binding type.
    7. Click the Browse Properties  icon.  Navigate to view, the params, the value, and then the lng property. 
    8. Click OK, then click OK again to save the binding.  

      At this point, the init.center.lng property is bound to view.params.value.lng where view.params.value.lng's value is "value" instead of a valid longitude number. This will cause a Component Error which is expected. 



Use the Maps View as a Subview for the Table

Lastly, we need to tell the CityStats View to use CityMaps as its subview.

  1. On the CityStats View, select the Table component.
  2. In the Property Editor, scroll down to the rows.subview.enabled property. 
  3. Next, enable the "enabled" property.



    As a result, you'll notice the table now has Expand  icons for each row.



  4. Next, find rows.subview.viewPath, and click the dropdown to see the a list of possible views. Choose CityMaps from the list and click OK



  5. Save your project.  
  6. Put the Designer into Preview mode. Click on the Expand  icon next to one of the cities. You'll see a map of the city appear underneath the table row for that city. To close the map, click the Collapseicon.




  • No labels