create and share smart m.apps in m.app enterprise · exercise 1: creating styles 7 exercise 1:...

76
CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE

Upload: others

Post on 19-Jul-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE

Page 2: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles
Page 3: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Contents

Using This Manual ................................................................................................................................ 1

Section 1: Adding Content to the Studio ............................................................................................ 2

Exercise 1: Adding Imagery .............................................................................................................. 3

Exercise 2: Adding vector data ......................................................................................................... 4

Section 2: Create styles for vector data ............................................................................................. 6

Exercise 1: Creating styles ............................................................................................................... 7

Section 3: User and Role Management ............................................................................................... 9

Exercise 1: Creating a role and a user .......................................................................................... 10

Section 4: Creating a Desktop App ................................................................................................... 11

Exercise 1: Creating a Desktop Legend ......................................................................................... 12

Exercise 2: Creating an Overview .................................................................................................. 14

Exercise 3: Creating a Desktop App............................................................................................... 15

Exercise 4: Starting a Desktop App ................................................................................................ 16

Exercise 5: Tweaking the Desktop App with Queries ..................................................................... 17

Exercise 6: Tweaking the Desktop App with Workflows................................................................. 20

Exercise 7: Improving the Workflow ............................................................................................... 26

Section 5: Creating Browser Apps .................................................................................................... 30

Exercise 1: Establishing the base for the Browser Apps ................................................................ 31

Exercise 2: Creating a Multi Viewer App ........................................................................................ 35

Exercise 3: Creating an Analyzer App ............................................................................................ 37

Exercise 4: Creating a M.App to run a Spatial Model..................................................................... 40

Section 5a: Analyzer Customization ................................................................................................. 49

Exercise 1: Importing an external library as a tooltip...................................................................... 50

Exercise 2: Using multiple Datasets ............................................................................................... 53

Page 4: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Section 6: Creating a Mobile App ...................................................................................................... 56

Exercise 1: Creating a mobile M.App ............................................................................................. 57

Exercise 2: Starting a mobile M.App .............................................................................................. 59

Exercise 3: Tweaking your mobile M.App ...................................................................................... 63

About Us .............................................................................................................................................. 69

Copyright and Terms of Use .............................................................................................................. 70

Page 5: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

1

Using This Manual

This manual contains step-by-step instructions on how to perform certain processes. You should be

aware that each exercise provides a single path through the application's tools. In most cases, there are

various ways to maximize tool usage, depending on the individual project.

This exercise manual is provided to the student, along with all images used by the instructor. Copies of

the presentation slides are available upon request. This provides the capability for recreating the

processes performed in class at a later date, as well as the key points on any theory involved.

Exercise Conventions

Section Title Page States the objective of the exercises and lists the application

tools to be used within the various tasks.

Exercise Tasks Each exercise is split into a set of tasks. After the course,

these tasks will help you locate within the manual where you

performed a certain set of steps.

Questions The instructor may quiz and/or review with you, following each

exercise.

Notational Conventions

Bold Text Any text that is bold indicates buttons, tabs, group names,

dialogs, and field names that are visible in the workspace

Monospace Text Any text that is monospace indicates a file name, text entered

by you, or code such as HTML, XML, JavaScript.

Graphics To help you locate buttons and objects used in the exercises,

the button icons will be next to the button name in the text.

Diagrams Optional diagrams can show you how to use some of the

application's tools.

This is a tip, describing a different way you can enter information into the

software or giving relevant information about the software.

This is a reference book, listing an external location (website, Help

document) where you can read or see more information.

Page 6: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

2

Section 1: Adding Content to the Studio

Section Objective In this section Imagery as well as vector data will be added, which can be used in different apps.

Tools Used

M.App Enterprise Studio

The Studio represents the administrative part of M.App Enterprise. All content, apps and user/role

management is done there.

Page 7: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Adding Imagery

3

Exercise 1: Adding Imagery

Adding one shaded relief to the content

In this exercise you are going to add a shaded relief to the content, which then can be used afterwards in

a Desktop App as well as in a Browser App.

Task 1: Adding the imagery

1. Click Content

2. Be sure that Imagery is active

3. Click New

4. Define a Name. Use Shaded_Relief as meaningful name.

5. Type C:\Warehouses\Imagery\New York\shaded_relief.ecw as a path.

UNC valid paths are allowed as a path.

If you are pointing to a folder, a virtual mosaic is created. Please note that it

is only useful if all imageries are spatially correlated with each other.

6. Define a Minimum scale of 150.000

7. Check ECWP and WMTS boxes.

Every client knows which format is the best fitting to its purpose. Rich client

uses ECWP if available. Browser only takes WMTS and WMS in

consideration.

Click Save.

Page 8: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 2: Adding vector data

4

Exercise 2: Adding vector data

Adding vector data to the content

In this exercise you are going to add some vector data to the content, which can be used in the Rich

Client and is the base for Vector Sets or OGC Services.

Task 1: Connecting to the PostgreSQL database

1. Click Vector Data

2. Click New

3. Again click New to add a new connection

4. Select PostGIS and type in:

a. Host: mil-hgdv-db01

b. Database: newyork_new

c. User: mapp

d. Password: mapp

5. Click Save.

If you click Save a background check will be executed if a connection to the

database is possible.

6. Import boroughs and boroughs_label

Page 9: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 2: Adding vector data

5

7. Rename the datasets to meaningful names:

i. Boroguhs

ii. Boroughs_Label

8. Click Import

Page 10: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

6

Section 2: Create styles for vector data

Section Objective In this section you are going to style some of the previously imported vector data

Tools Used

M.App Enterprise Studio

The Studio represents the administrative part of M.App Enterprise. All content, apps and user/role

management is done there.

M.App Enterprise Style Editor

The Style Editor allows you very easily and fast to define OGC SE visualizations.

Page 11: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Creating styles

7

Exercise 1: Creating styles

Creating styles for vector data

In this exercise you will create styles for Boroughs and the corresponding label, where the text for the

labels are coming out of a database.

Task 1: Styling of Boroughs

1. Click Stylesets.

2. Click New.

3. Type in a meaningful name e.g. HxGNStyles.

4. Click on the save icon.

5. Click the pencil icon to edit the styleset.

6. Click on the icon of Boroughs to add a new style.

7. Select Polygon at Add symbolizer.

8. Change Fill to Simple Fill.

9. Change Fill color to #c2c2c2.

10. Change Fill opacity to 50%.

11. Click Save.

Page 12: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Creating styles

8

Task 2: Styling of Labels of Boroughs

1. Click on the icon at Boroughs_Label.

2. Add Text at Add symbolizer.

3. Click the database symbol for Label Text.

4. From the drop down select boroname.

5. Increase the Font size to 24.

6. Add Standard in the Halo template view.

7. Click Save.

Page 13: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

9

Section 3: User and Role Management

Section Objective In this section you are going to create one user with a role to enable him to start various apps.

Tools Used

M.App Enterprise Studio

The Studio represents the administrative part of M.App Enterprise. All content, apps and user/role

management is done there.

Page 14: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Creating a role and a user

10

Exercise 1: Creating a role and a user

In this exercise a role is created which is assigned to different apps. This role is then assigned to a user,

so that the user can start the corresponding apps.

Task 1: Creating a role

1. Click Security.

2. Click Roles.

3. Click New.

4. Type in a Name e.g. New York.

5. Click Save.

Task 2: Creating a user

1. Click Users

2. Click New

3. Type in a Username e.g. NY_Editor

4. Type in a valid email address.

5. Check the box New York in the Roles section.

6. Click Save.

If you click Save in the background a email is sent to the address you typed

in at Step 4.

Page 15: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

11

Section 4: Creating a Desktop App

Section Objective In this section you are going to create your first Desktop App in M.App Enterprise

Tools Used

M.App Enterprise Studio

The Studio represents the administrative part of M.App Enterprise. All content, apps and user/role

management is done there.

Page 16: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Creating a Desktop Legend

12

Exercise 1: Creating a Desktop Legend

Creating a legend for the Rich client

In this exercise you will create a legend with all previously imported datasets. This legend will and can

only be used in the Rich client

Task 1: Creating a Legend

1. Click Desktop.

2. Be sure that Legends is active.

3. Click New.

Left hand side:

⚫ All available content (Imagery, vector data and GeoServices)

⚫ All available vector sets

Right hand side:

⚫ Name of the Legend

⚫ Drag and droppable box for the legend layout

4. Type in a meaningful Name for the Legend e.g. NewYork_Desktop.

5. Click Add Theme.

6. Type in Boroughs for the first theme.

7. Click Add Theme.

Page 17: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Creating a Desktop Legend

13

8. Type in Raster for the second theme.

9. Drag and drop Boroughs & Boroughs_Label into the first theme.

10. Drag and drop Shaded_Relief into the second theme.

Check the boxes in front, if you want to drag and drop more than one

element from the list on the left side to the legend layout.

11. Change the order within the Theme Boroughs by checking the Boroughs_Label dataset and

clicking on the layer one up button.

12. Rename Boroughs_Label to Boroughs (Label) by clicking on the name in the layout window.

13. Rename Shaded_Relief to Shaded Relief.

14. Final result should look like the following screenshot.

15. Click Save.

Page 18: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 2: Creating an Overview

14

Exercise 2: Creating an Overview

In this exercise you will create an overview for the Rich client.

Task 1: Creating an Overview

1. Click Overviews.

2. Click New.

3. Type in a meaningful name e.g. NY_Overview.

4. Drag and drop Boroughs from the left side to the overview layout.

5. Click Save.

Page 19: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 3: Creating a Desktop App

15

Exercise 3: Creating a Desktop App

With the last exercises you have now all necessary jigsaw pieces to combine it into one Rich client app.

Task 1: Creating a new desktop app

1. Click M.Apps.

2. Click New.

3. Assign the Legend from Exercise 1.

4. Assign the Overview from Exercise 2.

5. Assign the Styleset from Section 2 – Exercise 1.

6. Assign the Role from Section 3 – Exercise 1.

7. Type in a Name e.g. New York.

8. Type in an EPSG Code. For this example it is 2831.

9. Click Save.

If you leave the Bounding box input fields blank, the app automatically

calculates a bounding box based on your layers in the legend.

Page 20: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 4: Starting a Desktop App

16

Exercise 4: Starting a Desktop App

In this last part of the Desktop App content, you will start the app.

Task 1: Start the App

1. Browse https://servername/Apps/?tenant=TenantName

2. Login with credentials from Section 3 – Exercise 2

3. Click New York.

Please check if Java is installed on the client machine in order to start the

Desktop Apps

Page 21: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 5: Tweaking the Desktop App with Queries

17

Exercise 5: Tweaking the Desktop App with

Queries

In this exercise you are adding some additional queries, which can be used in the Desktop App.

Task 1: Adding Tax Lots to the content

1. Click Content.

2. Click Vector Data.

3. Click New.

4. Select the existing connection in the drop down list Connections.

5. Switch to the last page.

6. Check tax_lots.

7. Type in a Name e.g. Tax_Lots.

8. Set the Max scale to 2500.

9. Check Caching.

10. Click Import.

Task 2: Defining the Query

1. Click Desktop.

2. Click Queries.

3. Click New.

4. Type in a Name e.g. Information about Tax Lots

5. Set Query & Display Dataset to Tax_Lots by clicking the pencil

6. Type in SQL Query the following query: select ID, Borough, Address, OwnerName, ST_Area(geometry) as Area,

NumBldgs as "Number of Buildings", NumFloors as "Number of Floors",

YearBuilt from tax_lots where ID in ({ENTITY.IDFILTER})

Page 22: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 5: Tweaking the Desktop App with Queries

18

There are two types of Queries:

⚫ You have to pre select geometries before executing the query – Syntax: SELECT ... FROM TABLE WHERE PRIMKEYKEYFIELD IN

({ENTITY.SELECTIONSET})

⚫ You have to type in the value of an attribute – Syntax: SELECT ... FROM TABLE WHERE attribute =

{ENTITY.ATTRIBUT}

The two query types shown above may be executed together.

7. Click Test Query to check if the query is valid.

8. Click Save.

Task 3: Putting the Tax Lots into the Legend

1. Click Desktop.

2. Click Legends.

3. Click on the pencil icon to edit the existing legend.

4. Click Add Theme.

5. Type in a name for the Theme e.g. Tax Lots

6. Drag and drop Tax_Lots from the left side into the theme.

Page 23: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 5: Tweaking the Desktop App with Queries

19

7. Rename Tax_Lots to Tax Lots.

8. Put the theme to the top.

9. Click Save.

Task 4: Creating vector cache for Tax Lots

1. Click Desktop.

2. Click M.Apps.

3. Click on the first icon to publish the vector data.

Task 5: Using queries in the Rich client

1. Start the Desktop App or Reload if the Rich client is still open

2. Zoom in so that the Tax Lots will be visible.

3. Set layer Tax Lots active.

4. Select one or more geometries.

5. Click in the Quick Search

6. Double click on the Query to execute it.

Page 24: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 6: Tweaking the Desktop App with Workflows

20

Exercise 6: Tweaking the Desktop App with

Workflows

In this exercise you are adding some additional tools, which can be used in the Desktop App.

Task 1: Adding Building Extensions to the content

7. Click Content.

8. Click Vector Data.

9. Click New.

10. Select the existing connection in the drop down list Connections.

11. Check buildingextension.

12. Type in a Name e.g. BuildingExtension.

13. Click Import.

Task 2: Putting the Building Extensions into the Legend

1. Click Desktop.

2. Click Legends.

3. Click on the pencil icon to edit the existing legend.

4. Click Add Theme.

5. Type in a name for the Theme e.g. Building Extensions

6. Drag and drop BuildingExtension from the left side into the theme.

7. Rename BuildingExtension to Building Extensions.

8. Put the theme to the top.

9. Click Save.

Page 25: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 6: Tweaking the Desktop App with Workflows

21

Task 3: Adding a Workflow to the content

1. Click Content.

2. Click Workflows.

3. Click New.

a. Name BuildingExtensionWF

b. Select existing Connection in the dropdown list Connection

c. Click Save

4. Edit workflow definition by clicking on workflow editor tool

5. Drag&Drop a node, type list

a. ID of the new node BuildingExtensionsOverview

6. Edit List definition clicking on the node and then on the pencil button

a. Name BuildingExtensionList

b. Table buildingextension

c. ID Field id

7. Drag&drop columns and set following properties for each of them

a. Name id, Datatype number, Hidden checked

b. Name applicationnumber, Datatype number

c. Name firstname, Datatype string

d. Name lastname, Datatype string

8. Click on BuildingExtensionWF on the top bar (first node on the left)

9. Drag&Drop a node, type form, within the existing list node

a. ID of the new node EditBuildingExtension

Page 26: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 6: Tweaking the Desktop App with Workflows

22

b. Follow Node BuildingExtensionsOverview

10. Edit form definition clicking on the node and then on the pencil button (Edit)

a. Name EditBuildingExtensionForm

b. Table buildingextension

c. ID Field id

11. Click on NewTabPage1

a. Name BUILDING_Tab

b. Label General

12. Click on NewGroup1

a. Name DetailGroup

b. Label Details

13. Drag&Drop 4 TextField widgets within the group with the following properties

a. Name id, Datatype number, Visible click on edit (pencil button) and set it to hidden

(Static Value tab), Required unchecked

b. Name applicationnumber, Datatype number, DefaultValue click on Edit and put the

following in the Sql tab

Select 'AN-'|| cast(nextval('applicationnumber_seq') as char)

c. Name firstname, Datatype string

d. Name lastname, Datatype string

14. Drag&Drop an Action widget in the Form context (bottom of the form)

a. Name SaveAttributes

b. Action save

Page 27: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 6: Tweaking the Desktop App with Workflows

23

15. Click on BuildingExtensionWF on the top bar (first node on the left)

16. Click on BuildingExtensionsOverview list node and make sure that BuildingExtensionList is selected

in the property List.

17. Click on EditBuildingExtension form node and make sure that EditBuildingExtensionForm is selected

in the property Form.

18. Click Save on the top bar to save the workflow.

Task 4: Adding an Action Set to the desktop

1. Click Desktop.

2. Click Action Set.

3. Click New.

Page 28: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 6: Tweaking the Desktop App with Workflows

24

a. Name BuildingTools

4. Click on add action group (+) to Top context

a. Name BuildingGroup

5. Click on add workflow (+) to BuildingGroup

a. Name BuildingList

b. Workflow BuildingExtensionWF

c. Node BuildingExtensionsOverview

d. Width 800

e. Height 600

f. Blocking unchecked

6. Click Save.

Page 29: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 6: Tweaking the Desktop App with Workflows

25

Task 5: Enabling the Action Set in the desktop app

1. Click Desktop.

2. Click M.Apps.

3. Click Edit.

4. Click Action Set.

a. Check BuildingTools

b. Click Apply

5. Click Save

Task 6: Using workflow in the Rich client

1. Start the Desktop App or Reload if the Rich client is still open

2. Click on the button in the top bar.

3. Click on one row to have a look at the details form

Page 30: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 7: Improving the Workflow

26

Exercise 7: Improving the Workflow

In this exercise you are adding some additional functionalities to the workflow to interact with object

geometry.

Task 1: Adding a “Zoom to object” function in the list

1. Click on Workflow Editor button for the current workflow

2. Click on Resources on the top bar

3. Click on New -> Script

i. Name it BuildingScript

4. Click on Edit tool

5. Copy and paste the following

function zoomTo(layername,featureids){

SC.Map.setActiveLayer(layername).then(function(){

return SC.Map.clearSelectedElements().then(function(){

return SC.Map.setSelectedElements(featureids).then(function(){

return SC.Map.fitSelectedElements().then(function(){

return SC.Map.closeWebBrowser();

});

});

});

}).fail(function (error) {

alert(error);

});

}

Page 31: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 7: Improving the Workflow

27

6. Click on Save.

7. Click on Lists in the top bar.

8. Click on edit for the BuildingList

9. Select the script BuildingScript in the combobox for the property Custom Scritps of

BuildingExtensionList

10. Drag&Drop a RowAction in the ListConfiguration

a. Name Zoom

b. Image ig-icon-search

c. Action click on edit

i. Add the following to Javascript tab

zoomTo('BuildingExtension',[{ROW.id}])

ii. Click OK

11. Click Save on the top bar to save the workflow

12. Test the function in the Desktop App.

Task 2: Adding a geometry capture function

1. Click on Workflow Editor button for the current workflow

2. Click on Forms on the top bar

3. Click on Edit tool for the BuildingForm

4. Drag&Drop an Action widget in the form context

a. Name Submit

b. Action click on the Edit button and put the following in the Javascript tab

Page 32: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 7: Improving the Workflow

28

SC.digitize('BuildingExtension', {commands: ['MODIFY'], startOnLoad: 'MODIFY'},

[{FORM.id}])

c. Click on OK

5. Click Save on the top bar to save the workflow

6. Test the new function in the Desktop App

Task 3: Adding a form to capture new objects

1. Click on Workflow Editor button for the current workflow

2. Click on Forms on the top bar

3. Click on the second (Clone) button for the EditBuildingExtension form

4. Change Name from EditBuildingExtensionForm_Clone to NewBuildingExtensionForm

5. Select id textbox on the form and set

a. DefaultValue click on Edit button and put the following in the Sql tab

Select nextval('buildingextension_seq')

b. Defaultvalue Mode onsave

6. Select applicationnumber textbox in the form and make sure no DefaultValue is set.

7. Drag&Drop an Action widget in the form context

a. Name Submit

b. Action click on the Edit button and put the following in the Javascript tab

SC.digitize('BuildingExtension', {commands: ['NEWPOLYGON'], startOnLoad:

'NEWPOLYGON'})

The geometry-captunring-commands available to interact with the Desktop-

App are listed in this tuorial.

c. Click on OK

8. Click on BuildingExtensionWF on the top bar (first node on the left)

9. Drag&Drop a Form node in the BuildingExtensionsOverview context

a. ID of the new node NewBuildingExtension

10. Click on the new node and set the following properties

a. Form select NewBuildingExtensionForm from the combobox

Page 33: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 7: Improving the Workflow

29

b. Empty Form checked

11. Click on the BuildingExtensionsOverview node and then on Edit

12. Drag&Drop an Action widget on the BuildingExtensionList context and set

a. Name NewBuilding

b. Action click on Edit and put the following in the Javascript tab

IG.navigate('NewBuildingExtension')

13. Click on BuildingExtensionWF on the top bar (first node on the left)

14. Click on NewBuildingExtension form node and make sure that NewBuildingExtensionForm is selected

in the property Form.

15. Make sure that BuildingExtensionsOverview is selected in the property Follow Node.

16. Click Save on the top bar to save the workflow

17. Test the functionalities in the Desktop App

Page 34: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

30

Section 5: Creating Browser Apps

Section Objective In this section you are going to create your first Browser Apps in M.App Enterprise

Tools Used

M.App Enterprise Studio

The Studio represents the administrative part of M.App Enterprise. All content, apps and user/role

management is done there.

Page 35: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Establishing the base for the Browser Apps

31

Exercise 1: Establishing the base for the

Browser Apps

In this exercise you will create a legend and a Map View in order to use it in the Multi Viewer App

afterwards.

Task 1: Adding Potholes to the content

1. Click Content.

2. Click Vector Data.

3. Click New.

4. Select the existing connection in the drop down list Connections.

5. Check potholes.

6. Type in a Name e.g. Potholes.

7. Check Caching.

8. Click Import.

9. Define some Tooltips.

10. Define a Style for Potholes.

Task 2: Creating a Vector Set for the Multi Viewer App

1. Click Content.

2. Click Vector Sets.

3. Click New.

4. Specify TaxLots_VS as Name.

5. Specify 3857 as EPSG.

Page 36: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Establishing the base for the Browser Apps

32

6. Drag and drop Datasets Tax_Lots into the center panel.

7. Publish the VectorSet

Task 3: Creating a Vector Set for the Analyzer App

1. Click Content.

2. Click Vector Sets.

3. Click New.

4. Drag and drop Datasets Potholes and Borough into the center panel.

You may need to import Borough as Vector Data again with Caching active.

Only cached Vector Data can be used in VectorSets.

5. Specify NY_VectorSet as Name.

6. Specify 3857 as EPSG.

7. Click Save.

8. Publish the VectorSet

Page 37: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Establishing the base for the Browser Apps

33

Task 4: Creating a legend

1. Type in a Name e.g. NY_Browser.

2. Drag and Drop TaxLots_VS, Boroughs_Label, Boroughs and Open Street Map from the left side

into the legend.

3. Click Save.

Task 5: Creating a Map View

1. Click Map Views

2. Click New

3. Assign the legend from Task 3.

4. Assign the StylSets from Task 1.

5. Type in a Name e.g. New York Browser.

6. Type in 2831 as an EPSG Code.

7. Type in the following values (from left to right, from top to bottom):

⚫ 252800

⚫ 35000

⚫ 350300

Page 38: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Establishing the base for the Browser Apps

34

⚫ 92000

8. Click Save.

9. Click the pencil icon in the list to edit the map view.

10. Click Transform.

11. Type in 3857 in the EPSG modal form.

12. Click OK.

13. Click Save.

14. Publish the MapView

Page 39: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 2: Creating a Multi Viewer App

35

Exercise 2: Creating a Multi Viewer App

In this exercise you will get a detailed look in the M.App Enterprise Studio Editor.

Task 1: Creating a M.App

1. Click M.Apps.

2. Click New.

3. Assign the Role from Section 3 – Exercise 1.

4. Type in a Name e.g. New York (Browser).

5. Click Save.

Task 2: Configuring a Multi Viewer App

1. Click M.Apps.

2. Click the first icon to start the M.App Studio Editor

3. Define a layout in the first tab e.g. Choose a two sided window.

4. Drag and drop a Map into the Layout Window.

5. Select the Map View you have defined in Section 5 – Exercise 1 – Task 4

6. Click OK

Page 40: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 2: Creating a Multi Viewer App

36

7. Click Save.

Task 3: Start the Browser App

1. Browse https://servername/Apps/?tenant=TenantName

2. Login with the credentials from Section 3 – Exercise 2

3. Click New York (Browser).

Page 41: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 3: Creating an Analyzer App

37

Exercise 3: Creating an Analyzer App

In this exercise you will create an Analyzer App with dynamically filtering BI-widgets.

Task 1: Creating an Analyzer View

1. Click Browser.

2. Click Analyzer Views.

3. Click New.

4. Type in a Name e.g. Potholes

5. Click Save.

6. Click the second icon to open up Feature Analyzer.

7. Select Potholes for Data set in Feature Data.

8. Select Boroughs for Data set in Boundary Data.

9. Switching to the second tab.

10. Field Setup:

Page 42: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 3: Creating an Analyzer App

38

a. Theme Field: status

b. Date/Time Field: created_date

c. Date/Time Format: %d/%m/%Y %H:%M:%S

d. Boundary Data Foreign Key: borough

e. Boundary Data Primary Key: boroname

11. Switching to the fifth tab.

12. Enable Day of Week Chart.

13. Enable Date Chart.

14. Click Apply.

15. Click Save.

Task 2: Creating a M.App

16. Click M.Apps.

17. Click New.

18. Assign the Role from Section 3 – Exercise 1.

19. Type in a Name e.g. Pothole Analyzer.

20. Click Save.

Task 3: Configuring an Analyzer App

1. Click the first icon to start the M.App Studio Editor.

2. Define a layout in the first tab e.g. choose a one panel window.

3. Drag and drop an Analyzer View into the Layout Window.

4. Select the Analyzer View you have defined in Section 5 – Exercise 3 – Task 1.

Page 43: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 3: Creating an Analyzer App

39

5. Click OK.

6. Click Save.

Page 44: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 4: Creating a M.App to run a Spatial Model

40

Exercise 4: Creating a M.App to run a

Spatial Model

In this exercise you are creating a browser based application capable of running a Spatial Model and

display the result on the map.

We will use a model that creates a color shaded relief file, using a raster elevation model as input. A

description and the definition of the model can be found at this tutorial on the community (you must

download the json definition from that page in order to follow this exercise). The input DEM is already

provided for you on the server.

Task 1: Creating a Legend

1. Click Browser

2. Be sure that Legends is active

3. Click New

a. Name: GeoprocessingLegend

b. Drag&drop OpenStreetMap to the legend

4. Click Save

Task 2: Creating a Map View

1. Click Browser

2. Click Map Views

3. Click New

a. Name: GeoprocessingMapView

b. EPSG: 3857

c. Lower Corner: 1066860 6812018

d. Upper corner: 1098378 6848289

e. Legend: GeoprocessingLegend

4. Click Save

Page 45: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 4: Creating a M.App to run a Spatial Model

41

Task 3: Creating the M.App

1. Click Browser

2. Click M.Apps

3. Click New

a. Name: GeoprocessingApp

b. Role: New York

4. Click Save

5. Edit app using Open in Editor tool

6. Click on the first button in the top left corner (Layout)

7. Drag&Drop a 2 vertical panels layout into the app editor main window

8. Adjust the left panel to be smaller (reduce width)

9. Click on the second button in the top left corner (Panel Templates)

10. Drag&Drop a Map Panel template into the right panel in the app editor main window

11. Select the MapView GeoprocessingMapView

Page 46: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 4: Creating a M.App to run a Spatial Model

42

12. Drag&Drop a Recipe template into the left panel in the app editor main window

13. Select Create New tool, Spatial Workshop application will be loaded

14. Click on the Import button and choose the shadedrelief.json file you have downloaded from the

community tutorial

Page 47: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 4: Creating a M.App to run a Spatial Model

43

15. Click on the Save button and close Spatial Workshop application

16. In M.App Editor click Cancel and click again on the Recipe panel to get back to the updated list of

recipes

17. Select Color Shaded Relief and click on Next

18. For Port Input 4 click Choose file … and select ROOT -> ShadedRelief ->

ASTGTM2_N40W075_dem.tif

Page 48: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 4: Creating a M.App to run a Spatial Model

44

19. For Port Input 6 select ROOT -> ShadedRelief -> Output

20. Click on OK

21. Click on the third button of the top left corner (Customize)

22. Click on the JS button of the Recipe panel

23. In the left menu, from Code Examples, select Recipe panel customization legend from

09.MAppEnterprise section, drag&drop it in the source code opened before

Page 49: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 4: Creating a M.App to run a Spatial Model

45

24. Update the existing text OUTPUT_PORT_NAME to Port Input 6

25. Close the editor clickinh X on the top right corner

26. Click on JS of the Map panel

27. In the left menu, from Code Examples, select Add WMS leyer to the legend from

09.MAppEnterprise section, drag&drop it in the source code opened before

Page 50: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 4: Creating a M.App to run a Spatial Model

46

28. Close the editor clickinh X on the top right corner

29. Save your M.App

Task 4: Testing the M.App

1. Open the MyApps page

2. Click on the newly created app.

3. The input DEM is already selected in PORT INPUT 4

4. Provide a name for the output PORT INPUT 6 like MyColorShadedRelief

Page 51: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 4: Creating a M.App to run a Spatial Model

47

5. Click on Execute

6. At the end of the process you will see the output directly on the map content

Page 52: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 4: Creating a M.App to run a Spatial Model

48

Task 5: Creating the M.App using different Recipes

Repeat tasks 3 and 4 using different recipes:

- Helicopter Landing Zones

- Basic Change Detection (this tutorial includes important information regarding the Geoprocessing

architecture and setup)

The dataset have been already uploaded to the server for convenience, you just have to download the

Recipe definition from the tutorials.

Page 53: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

49

Section 5a: Analyzer Customization

Section Objective In this section you will learn Feature Analyzer customization

Tools Used

M.App Enterprise Studio / Feature Analyzer

The Studio represents the administrative part of M.App Enterprise. All content, including Feature Analyzer

view management is done there.

Page 54: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Importing an external library as a tooltip

50

Exercise 1: Importing an external library as

a tooltip

In this exercise you are creating an Analyzer view which will import a third party charting library which we

will use within a tooltip. The idea is to understand that mostly any library can be imported dynamically into

Analyzer.

Task 1: Prepare Analyzer with Data

1. Prepare a VectorSet called Crimes_VS with the Vector Data crime_sum.

Check Section 1 – Exercise 2 for importing Vector Data.

Check Section 5 – Exercise 1 – Task 3 for creating a Vector Set

2. Publish the VectorSet

Task 2: Create a new Analyzer View

1. Click Browser

2. Click Analyzer Views

3. Click New. Call the view “Custom Tooltips”. Press Enter

4. Click the Analyzer Icon beside “Custom Tooltips”

Task 3: Create a new Custom Functional Attribute

1. Click the “Functional Attributes” tab of the configuration window

2. Click “Add”

3. Call the new functional attribute “CanvasJS”

4. Clear out the default text and then paste the following code in:

Page 55: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Importing an external library as a tooltip

51

var name = "CanvasJS Integration"; if (rowId === 0) { var fieldPing = function (fieldName) { var ping = currentRecord[fieldName]; } fieldPing("murder_and_manslaughter"); fieldPing("rape"); fieldPing("robbery"); fieldPing("felony_assault"); fieldPing("burglary"); fieldPing("grand_larceny"); var action = async (row, currentRecord, attributeData, extendedConfiguration) => { var element = document.getElementById(configuration.configuration.prefix + row); if (!window.CanvasJS) await import("/resources/assets/canvasjs.min.js"); var chart = new CanvasJS.Chart(configuration.configuration.prefix + row, { title:{ text: "Crime Index" }, data: [{ // Change type to "doughnut", "line", "splineArea", etc. type: "line", dataPoints: [ { label: "Murder", y: +currentRecord["murder_and_manslaughter"] }, { label: "Rape", y: +currentRecord["rape"] }, { label: "Robbery", y: +currentRecord["robbery"] }, { label: "Assault", y: +currentRecord["felony_assault"] }, { label: "Larceny", y: +currentRecord["burglary"] }, { label: "MV Larceny", y: +currentRecord["grand_larceny"] }] }] }); chart.render(); }; var configuration = { configuration: { size: { canvasWidth:"300", canvasHeight:"400" }, prefix: "StaticChart-" + Math.floor(Math.random() * 100000) }, action: action }; TooltipController.RegisterCustomAction(name, configuration); } return TooltipController.RenderChart(name, rowId);

Page 56: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Importing an external library as a tooltip

52

5. Click Apply.

Task 3: Add the Tooltip

1. Click the tooltips tab of the configuration window

2. Click Add.

3. Select “CanvasJS” as the Field Name

4. Click Apply

5. Close the Configruation screen by clicking the wrench.

Task 4: Display the custom tooltip

1. Open the Layer menu

2. Click Preferences

3. Enable “Feature Tooltips”

4. Click any boundary feature in the map

5. You should now see the custom CanvasJS chart in the tooltip:

Page 57: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 2: Using multiple Datasets

53

Exercise 2: Using multiple Datasets

In this exercise, you will create an additional feature layer we can use for charting and feature display.

Note that this section involves using the Analyzer API

Task 1: Create a new Analyzer View

1. Using the M.App Enterprise Studio, click Browser

2. Click Analyzer Views

3. Click New. Call the view Multiple Datasets. Press Enter

4. Click the Analyzer Icon beside Multiple Datasets

Task 2: Prepare Analyzer with Data

1. Specify NY_VectorSet as the Vector set

2. Specify Potholes_VectorSet as the Data set.

3. Click Apply

4. Zoom in on the New York area.

Task 3: Launch the Developer Window

1. With Analyzer active, press CTRL-SHIFT-I (or OPTION-COMMAND-I if on a Mac)

Task 4: Create the new Stage

1. In the console paste this line and press enter:

let stage = await Analyzer.createStage("boundaries", { mode: "EnterpriseConnector", vectorset: "NY_VectorSet", datasetName: "Boroughs"});

2. Wait for the console to read undefined. This lets us know that the dataset has been successfully

loaded.

Page 58: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 2: Using multiple Datasets

54

Task 5: Create a Theme Chart for the new Stage

1. Next, let’s create a theme. Paste the following line into the console and press enter:

var theme = Analyzer.createThemeWidget(stage, "boroname");

2. Next, we need to add the theme chart to Analyzer. Copy and paste the following line and press enter:

Analyzer.addWidget(theme);

3. You’ll see the theme chart immediately added to Analyzer. However the contents read empty. This is

because Analyzer optimizes data transfer from M.App Enterprise. In the Configuration menu, click

Apply. This will force a reload which loads the missing fields.

4. You notice that the theme chart now has data populated within it.

Task 6: Add Geometry to the Map Window

1. In the console, paste the following line and press enter:

stage = Analyzer.findStageModel("boundaries");

2. In the console, paste the following line and press enter:

var featureLayer = Analyzer.createFeatureLayer(stage);

3. You can give the feature layer a name. E.g. featureLayer.title = "Boroughs"

4. Finally, in the console:

Analyzer.addWidget(featureLayer);

5. You’ll notice that the feature layer is now immediately available in the map window

Task 7: Linking Stage Models

If you click one of the items on the pie chart, you’ll notice that the point feature do not filter. In some

cases, we’ll want to link two stages together. This means that if a filter is applied to one dataset, the other

dataset will update. To do this we’ll need to once again use the API.

1. Since the key fields don’t match, we need to create a functional attribute to fix this. Click the

Functional Attributes tab of the configuration window

Page 59: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 2: Using multiple Datasets

55

2. Create a new functional attribute called boroname_uc.

3. Set the Dataset parameter is set to boundaries.

4. Replace the contents of the Javascript window with:

return currentRecord["boroname"].toUpperCase();

5. In the console, paste in the following line and press enter:

Analyzer.linkStageModel(Analyzer.findStageModel(), "borough", Analyzer.findStageModel("boundaries"), "boroname_uc");

6. Click Apply in the configuration menu as this will load the needed fields to make the link.

7. Click the Borough Name in the Pie Chart. You will notice that the point dataset now filters from your

area feature filter.

Page 60: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

56

Section 6: Creating a Mobile App

Section Objective In this section you are going to create your first Mobile App in M.App Enterprise

Tools Used

M.App Enterprise Studio

8. The Studio represents the administrative part of M.App Enterprise. All content, apps and user/role

management is done there. In addition to Studio you will have to use a text editor of your preference.

Page 61: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Creating a mobile M.App

57

Exercise 1: Creating a mobile M.App

In this exercise you are creating a mobile application capable of capturing data on the field.

Task 1: Define and upload the shell

1. Click Mobile 2. Be sure Shell is active 3. Click New

a. Name Basic b. Select Basic.zip on your computer as Shell

4. Click Save

Task 2: Define the Data Source

1. Click Mobile 2. Click Datasources 3. Click New

a. Name MobileSamples b. EPSG 4326 c. Select existing Connection in the dropdown list Connection

4. Click Save

Page 62: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 1: Creating a mobile M.App

58

Task 3: Create a Mobile app which connects shell and data source

1. Click Mobile 2. Click Mapps 3. Click New

a. Name Basic b. Title Basic c. Assign the Shell from Task 1 d. Assign the data source from Task 2 e. Assign a Role

4. Click Save

Page 63: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 2: Starting a mobile M.App

59

Exercise 2: Starting a mobile M.App

In this exercise you will start the mobile application.

Task 1: Viewing the app in the Apps page

1. Browse https://servername/Apps/?tenant=TenantName 2. Login with credentials from Section 6 - Excercise 1

3. If you click on the app you will see a QR code which we need to connect the M.App Enterprise mobile app to your tenant.

NOTE: you only need to do this once per tenant as you can choose

between all assigned apps in the app

Page 64: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 2: Starting a mobile M.App

60

Task 2: Getting the M.App Enterprise app

NOTE: This task you need to execute on your Smartphone!

1. On your Smartphone: Download the M.App Enterprise app from the app store depending on your platform:

a. Android b. iOS c. Windows 10

Task 3: Starting the App Configuration

NOTE: This task you need to execute on your Smartphone!

1. After you installed and launched the app, you can connect to your tenant by clicking on the ‘+’-

button:

Page 65: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 2: Starting a mobile M.App

61

2. Click on the scan QR code button or enter connection details manually:

If you scan the QR code the connection details should be filled in automatically:

NOTE: You need a valid SSL certificate or enable HTTP requests in IIS on

your M.App Enterprise Application-Server!

3. Click Save at the top right.

4. Select mobile configuration in the picker

Page 66: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 2: Starting a mobile M.App

62

5. Login with the username and password.

6. Click the orange button

7. Select Basic out of the apps assigned to you.

8. Click the orange button

NOTE: You will see an empty location list where you can add new

locations and view existing ones.

Page 67: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 3: Tweaking your mobile M.App

63

Exercise 3: Tweaking your mobile M.App

In this exercise you are adding additional capabilities to your mobile application.

Task 1: Adding a Map

1. Copy NativeMap.xaml from templates folder 2. Shell.xaml → Add to MasterDetail.Views:

<Navigation Id="MapNavigation">

<NativeMap Id="NativeMap" Title="Map" Center=" 19.398184;-99.174041" View="NativeMap" ZoomLevel="14" MapType="Roads"/>

</Navigation>

3. Menu.xaml → a. Add to Menu:

<MenuItem Target="MapNavigation" Title="Map" Icon="Map"

Type="Toolbar"/>

b. Add to Logout item Type="Toolbar"

4. Upload the modified Basic.zip (all files) 5. Test App (logout and login again)

Task 2a: Adding spatial information to Locations

1. Shell.xaml → Add to Entity Id="Locations": <Field Name="geometry" Type="Geometry" />

2. NativeMap.xaml →add to NativeMap.Layers: <MarkerVectorLayer Entity="Locations" Icon="Map.Pin.png" ZIndex="3" MinimumZoomLevel="13" MaximumZoomLevel="22"> </MarkerVectorLayer>

3. LocationForm.xaml → add to Form: <Geometry Name="geometry" Title="Geometry"> <GeometryFieldAction Target="NativeMap" Capture="True"> <Parameter Name="ZoomLevel" Value="19" /> </GeometryFieldAction> </Geometry>

4. Upload the modified Basic.zip (all files) 5. Test App (you must wipe local data while connecting because data model has changed)

Page 68: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 3: Tweaking your mobile M.App

64

Task 2b: Adding tools to the Map

1. NativeMap.xaml -→ a. Add to NativeMap.ShellActions:

<NavigateSelectionAction Type="Secondary" /> <ToggleLayerAction Type="Secondary" /> <CaptureDistanceAction Type="Secondary" /> <CurrentLocationAction Type="Secondary" /> <AutoCenterMapAction Type="Secondary" />

b. Add to MarkerVectorLayer: <FeatureInfo Title="Name: @{name}" Detail="Comments: @{description}"> <NavigateShellAction Icon="Edit" Target="LocationForm"> <Parameter Name="Id" Value="@{id}" /> </NavigateShellAction> <NavigateSelectionAction /> </FeatureInfo>

2. Upload the modified Basic.zip (all files) 3. Test App

Task 3: Adding a 1:N relationship to store pictures

1. Shell.xaml → a. add to Entities:

<Entity Id="Image" Table="images" Key="id" SyncType="Automatic" RevisionField="lastupdatetime">

<Field Name="id" Type="Guid" IsRequired="True"/>

<Field Name="imagetype" Type="String"/>

<Field Name="entity_id" Type="Guid" ForeignEntity="Locations"/>

<Field Name="description" Type="String"/>

<Field Name="image" Type="Binary" LazyLoading="True"/>

<Field Name="image_thumb" Type="Binary"

LazyLoading="False"/>

<Field Name="image_size" Type="Number"/>

<Field Name="image_mimetype" Type="String"/>

<Field Name="lastupdatetime" Type="Timestamp"/> </Entity>

b. Add to MasterDetail.Views: <Navigation Id="LocationImageNavigation">

<Form Id="LocationImageForm" Title="Images"

View="LocationImageForm" Entity="{x:Reference Image}"/> </Navigation>

Page 69: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 3: Tweaking your mobile M.App

65

4. LocationForm.xaml -→add to Form: <Table Name="Images" Title="Images" Entity="Image"

Target="LocationImageForm" RowCount="5" LazyLoading="False">

<Table.RowActions>

<DownloadImageRowAction Field="image"/>

</Table.RowActions>

<Table.Actions>

<NavigateFieldAction Icon="Camera" Target="LocationImageForm">

<Parameter Name="Field.Value.entity_id" Value="@{id}" />

</NavigateFieldAction>

</Table.Actions>

<TableCell Name="imagetype" Title="Type"/>

<TableCell Name="description" Title="Comment"/>

<TableCell Name="lastupdatetime" Title="Created"/> </Table>

5. Copy LocationImageForm.xaml from templates folder 6. Upload the modified Basic.zip (all files) 7. Test App (you must wipe local data while connecting because data model has changed)

Task 4: Adding values based on a picklist table

1. Shell.xaml → a. add Entity Id="LocationType":

<Entity Id="LocationType" Key="id" SyncType="Automatic"

Table="loc_type">

<Field IsRequired="True" Name="id" Type="Guid" />

<Field Name="type" Type="String"/>

</Entity>

b. Add to Entity Id="Locations": <Field Name="type" Type="String" />

2. LocationForm.xaml → add to Form: <Picker Name="type" Title="Location Type" KeyMember="id"

DisplayMember="type" Items="{Entity LocationType}"/>

3. Upload the modified Basic.zip (all files) 4. Test App (you must wipe local data while connecting because data model has changed)

Page 70: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 3: Tweaking your mobile M.App

66

Task 5a: Adding scripts to the form

1. Shell.xaml → add to Entity Id="Locations": <Field Name="status" Type="String" />

2. LocationForm.xaml → a. Add to Form:

<Entry Name="status" Title="Status" IsEnabled="false"/>

b. Add to Form: <Form.Scripts>

<StartupScript Name="OnFormStartup">

if (!Context.getValue('status')) {

Context.setValue('status','Open');

}

</StartupScript>

</Form.Scripts>

c. Update Entry Name="status" to (change status for requesting approval): <Entry Name="status" Title="Status" IsEnabled="false">

<ScriptFieldAction Icon="Click"> Context.setValue('status','Awaiting Approval');

</ScriptFieldAction >

</Entry>

3. Upload the modified Basic.zip (all files) 4. Test App (you must wipe local data while connecting because data model has changed)

Task 5b: Displaying locations in different lists based on the status

1. Shell.xaml → a. add Entity.Filters to Entity Id="Locations" to handle sql query:

<Entity.Filters>

<Filter Id="LocationsOpen" Sql="status = 'Open'" IsDefault="False"

/>

<Filter Id="LocationsToApprove" Sql="status = 'Awaiting Approval'"

IsDefault="False" />

</Entity.Filters>

Page 71: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 3: Tweaking your mobile M.App

67

b. Add Navigation to handle a different list: <Navigation Id="LocationToApproveNavigation">

<List Id="LocationToApproveList" Title="Locations To Approve"

View="LocationList" Entity="{x:Reference Locations}">

<Form Id="LocationForm" Title="Location" View="LocationForm"

Entity="{x:Reference Locations}" Target="LocationList" />

</List>

</Navigation>

c. Add List.Filters to both Navigation elements: i. Navigation id="LocationNavigation":

<List.Filters> <FilterRef Filter="{x:Reference LocationsOpen}"

Title="Locations" IsDefault="True"/> </List.Filters>

ii. Navigation id="LocationToApproveNavigation": <List.Filters>

<FilterRef Filter="{x:Reference LocationsToApprove}"

Title="Locations To Approve" IsDefault="True"/>

</List.Filters>

2. Menu.xaml →

a. Add Menuitem to show the new Navigation: <MenuItem Target="LocationToApproveNavigation" Title="Locations To Approve" Icon="Work" />

3. Upload the modified Basic.zip (all files) 4. Test App

Task 6: Customizing via Javascript

1. LocationForm.xaml → a. Disable camera action if location has not been saved yet

Add to <NavigateFieldAction Icon="Camera" Target="LocationImageForm">:

<NavigateFieldAction.BeforeScript>

var id = Context.getValue('id');

if (!id) {

Context.message('Location must be saved before start capturing

pictures');

Context.cancel();

}

</NavigateFieldAction.BeforeScript>

Page 72: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

Exercise 3: Tweaking your mobile M.App

68

b. Ask the user for confirmation before deleting a Location Change DeleteShellAction this way: <DeleteShellAction.BeforeScript>

Context.alert('Would you really like to delete?', 'Yes', 'No',

function (result) { if (!result)

Context.cancel();

else

Context.done();

});

</DeleteShellAction.BeforeScript>

2. Upload the modified Basic.zip (all files) 3. Test App

Page 73: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

69

About Us

Hexagon Geospatial helps you make sense of the dynamically changing world. We enable you to

envision, experience and communicate geographic information. Our technology provides you the form to

design, develop and deliver solutions that solve complex, real-world challenges. Ultimately, this is

realized through our creative software products and platforms.

CUSTOMERS. Globally, a wide variety of organizations rely on our products daily including local, state

and national mapping agencies, transportation departments, defense organizations, engineering and

utility companies, and businesses serving agriculture and natural resource needs. Our portfolio enables

these organizations to holistically understand change and make clear, reliable decisions.

TECHNOLOGY. Our priority is to deliver products, platforms and solutions that make our customers

successful. Hexagon Geospatial is focused on developing technology that displays and interprets

information in a personalized, meaningful way. We enable you to transform location-based content into

dynamic and useable business information that creatively conveys the answers you need.

PARTNERS. As an organization, we are partner-focused, working alongside our channel to ensure we

succeed together. We provide the right platforms, products, and support to our business partners so that

they may successfully deliver sophisticated solutions for their customers. We recognize that we greatly

extend our reach and influence by cultivating channel partner relationships both inside and outside of

Hexagon.

TEAM. As an employer, we recognize that the success of our business is the result of our highly

motivated and collaborative staff. At Hexagon Geospatial, we celebrate a diverse set of people and

talents, and we respect people for who they are and the wealth of knowledge they bring to the table. We

retain talent by fostering individual development and ensuring frequent opportunities to learn and grow.

HEXAGON. Hexagon’s solutions integrate sensors, software, domain knowledge and customer workflows

into intelligent information ecosystems that deliver actionable information. They are used in a broad range

of vital industries.

Hexagon (Nasdaq Stockholm: HEXA B) has approximately 17,000 employees in 46 countries and net

sales of approximately 3.3bn USD. Learn more at hexagon.com and follow us @HexagonAB.

Page 74: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

70

Copyright and Terms of Use

Copyright

© 2017 Hexagon AB and/or its subsidiaries and affiliates. All rights reserved. Hexagon has registered

trademarks in many countries throughout the world. Visit the Trademarks Page for information about the

countries in which the trademarks are registered. See Product Page and Acknowledgments for more

information.

Product Documentation Terms of Use

PLEASE READ THESE TERMS CAREFULLY BEFORE USING HEXAGON GEOSPATIAL’S

DOCUMENTATION ("DOCUMENT"). USE OF THIS DOCUMENT INDICATES ACCEPTANCE OF THIS

AGREEMENT WITHOUT MODIFICATION. IF YOU DO NOT AGREE TO THE TERMS HEREOF

("TERMS"), DO NOT USE THIS DOCUMENT.

Use Of This Document

All materials in this Document are copyrighted and any unauthorized use may violate worldwide

copyright, trademark, and other laws. Subject to the terms of this Agreement, Hexagon Geospatial (a

Division of Intergraph Corporation) and Intergraph’s subsidiaries ("Intergraph") hereby authorize you to

reproduce this Document solely for your personal, non-commercial use. In consideration of this

authorization, you agree to retain all copyright and other proprietary notices contained therein. You may

not modify the Materials in any way or reproduce or publicly display, perform, or distribute or otherwise

use them for any public or commercial purpose, except as specifically authorized in a separate

agreement with Hexagon Geospatial.

The foregoing authorization specifically excludes content or material bearing a copyright notice or

attribution of rights of a third party. Except as expressly provided above, nothing contained herein shall be

construed as conferring by implication, estoppel or otherwise any license or right under any copyright,

patent or trademark of Hexagon Geospatial or Intergraph or any third party.

If you breach any of these Terms, your authorization to use this Document automatically terminates.

Upon termination, you will immediately destroy any downloaded or printed Materials in your possession or

control.

Disclaimers

ALL MATERIALS SUPPLIED HEREUNDER ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY

KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, ANY IMPLIED

WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NON-

INFRINGEMENT. Hexagon Geospatial does not warrant that the content of this Document will be error-

free, that defects will be corrected, or that any Hexagon Geospatial Website or the services that make

Materials available are free of viruses or other harmful components.

Hexagon Geospatial does not warrant the accuracy and completeness of this Document. Hexagon

Geospatial may make changes to this Document at any time without notice.

Page 75: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

71

Limitation Of Liability

IN NO EVENT SHALL HEXAGON GEOSPATIAL BE LIABLE FOR ANY DIRECT, INDIRECT,

INCIDENTAL, SPECIAL OR CONSEQUENTIAL DAMAGES, OR DAMAGES FOR LOSS OF PROFITS,

REVENUE, DATA OR USE, INCURRED BY YOU OR ANY THIRD PARTY, WHETHER IN AN ACTION

IN CONTRACT OR TORT, ARISING FROM YOUR ACCESS TO, OR USE OF, THIS DOCUMENT.

Indemnification

You agree to defend, indemnify, and hold harmless Hexagon Geospatial, its officers, directors,

employees, and agents from and against any and all claims, liabilities, damages, losses or expense,

including reasonable attorneys' fees and costs, arising out of or in any way connected with your access to

or use of this Document.

Use Of Software

Use of software described in this Document is subject to the terms of the end user license agreement that

accompanies the software, if any. You may not download or install any software that is accompanied by

or includes an end user license agreement unless you have read and accepted the terms of such license

agreement. Any such software is the copyrighted work of Hexagon Geospatial, Intergraph or its licensors.

Portions of the user interface copyright 2012-2017 Telerik AD.

Links To Third Party Websites

This Document may provide links to third party websites for your convenience and information. Third party

websites will be governed by their own terms and conditions. Hexagon Geospatial does not endorse

companies or products to which it links.

Third party websites are owned and operated by independent parties over which Hexagon Geospatial has

no control. Hexagon Geospatial shall not have any liability resulting from your use of the third party

website. Any link you make to or from the third party website will be at your own risk and any information

you share with the third party website will be subject to the terms of the third party website, including

those relating to confidentiality, data privacy, and security.

Trademarks

The trademarks, logos and service marks ("Marks") displayed in this Document are the property of

Hexagon Geospatial, Intergraph or other third parties. Users are not permitted to use Marks without the

prior written consent of Hexagon Geospatial, Intergraph or the third party that owns the Mark. "Intergraph"

is a registered trademark of Intergraph Corporation in the United States and in other countries. Other

brands and product names are trademarks of their respective owners.

Find additional trademark information.

Procedure For Making Claims Of Copyright Infringement

Notifications of claimed copyright infringement should be sent to Hexagon Geospatial by mail at the

following address: Intergraph Corporation, Attn: Intergraph Legal Department, P.O. Box 240000,

Huntsville, Alabama 35824.

Page 76: CREATE AND SHARE SMART M.APPS IN M.APP ENTERPRISE · Exercise 1: Creating styles 7 Exercise 1: Creating styles Creating styles for vector data In this exercise you will create styles

72

US Government Restricted Right

Materials are provided with "RESTRICTED RIGHTS." Use, duplication, or disclosure of Materials by the

U.S. Government is subject to restrictions as set forth in FAR 52.227-14 and DFARS 252.227-7013 et

seq. or successor provisions thereto. Use of Materials by the Government constitutes acknowledgment of

Hexagon Geospatial or Intergraph’s proprietary rights therein.

International Use

You may not use or export Materials in violation of U.S. export laws and regulations. Hexagon Geospatial

makes no representation that Materials are appropriate or available for use in every country, and access

to them from territories where their content is illegal is prohibited.

Hexagon Geospatial provides access to Hexagon Geospatial international data and, therefore, may

contain references or cross references to Hexagon Geospatial products, programs and services that are

not announced in your country. These references do not imply that Hexagon Geospatial intends to

announce such products, programs or services in your country.

The Materials are subject to U.S. export control and economic sanctions laws and regulations and you

agree to comply strictly with all such laws and regulations. In addition, you represent and warrant that you

are not a national of, or otherwise located within, a country subject to U.S. economic sanctions (including

without limitation Iran, Syria, Sudan, Cuba, and North Korea) and that you are not otherwise prohibited

from receiving or accessing the Materials under U.S. export control and economic sanctions laws and

regulations. Hexagon Geospatial makes no representation that the Materials are appropriate or available

for use in every country, and access to them from territories where their content is illegal is prohibited. All

rights to use the Materials are granted on condition that such rights are forfeited if you fail to comply with

the terms of this agreement.

Revisions

Hexagon Geospatial reserves the right to revise these Terms at any time. You are responsible for

regularly reviewing these Terms. Your continued use of this Document after the effective date of such

changes constitutes your acceptance of and agreement to such changes.

Applicable Law

This Document is created and controlled by Hexagon Geospatial in the State of Alabama. As such, the

laws of the State of Alabama will govern these Terms, without giving effect to any principles of conflicts of

law. You hereby irrevocably and unconditionally consent to submit to the exclusive jurisdiction of the

United States District Court for the Northern District of Alabama, Northeastern Division, or the Circuit

Court for Madison County, Alabama for any litigation arising out of or relating to use of this Document

(and agree not to commence any litigation relating thereto except in such courts), waive any objection to

the laying of venue of any such litigation in such Courts and agree not to plead or claim in any such

Courts that such litigation brought therein has been brought in an inconvenient forum. Some jurisdictions

do not allow the exclusions or limitations set forth in these Terms. Such exclusions or limitations shall

apply in all jurisdictions to the maximum extent allowed by applicable law.

Questions

Contact us with any questions regarding these Terms.