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

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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. 



On_this_page



Here's what our finished view will look like:



Create a View for the Table Data

  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.

    Editor_notes

    replace image above with the following at 8.0.8 release. no banner needed


  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:

    Expand
    titleClick here to view the data...


    Code Block
    [
      {
        "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 Image Modified 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 Coordinate layout and do not check the Page URL option.

    Editor_notes

    replace the image above with the following at the release of 8.0.8. no banner needed.



  2. In the Property Editor, set the defaultSize to 300 for both the width and the height. 
  3. Select the root then change the mode property to percent.
  4. Drag a Map component onto the CityMaps View. Set the Position properties as follows: 

    x: 0
    y: 0
    width: 1
    height: 1

    2019-12-05_16-56-48.png

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

    Note

    You must use "value" as the object name when setting up these view parameters.


  7. Next we'll add two parameters to that value object. 
    1. Click AddObjectMember 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 AddObjectMember icon next to value and choose Value.
    4. Double click on key, and enter lng.   This This matches the lng (longitude) column from the Table on the CityStats view. This name must exactly match the column name in the table.



  8. 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.
    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.


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.viewPath property. 
  3. Click the Expand  icon to see the views. Choose CityMaps from the list and click OK



  4. Save your project.  
  5. 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.




Next_link