Designer Configuration - Intent Architect Modules

Designers provide the visual modeling interface in Intent Architect. You can create custom designers to model domain-specific concepts and metadata.

What are Designers?

Designers are visual interfaces that allow users to:

Create and organize elements
Define relationships between elements
Configure element properties using stereotypes
Model domain-specific concepts
Provide metadata for code generation

Designer Files

A designer consists of two main files:

.designer.config
.designer.settings

Defines the designer structure:

Module Builder.designer.config

<?xml version="1.0" encoding="utf-8"?>
<config>
  <id>a1c3dd87-352e-4353-853b-c79853debecb</id>
  <name>Module Builder</name>
  <order>-1</order>
  <icon type="UrlImagePath" source="data:image/svg+xml;base64,..."/>
  <loadStartPage>false</loadStartPage>
  
  <designerReferences>
    <designerReference id="55d06096-83fe-4acf-86ef-586d254e5170" 
                       name="Common Types" 
                       module="Intent.Common.Types" />
  </designerReferences>
  
  <packageReferences>
    <packageReference packageId="caccdda9-26f4-49bf-8b73-cadc2220de16" 
                     include="Intent.Common">
      <path>Intent.Common/Intent.Common.pkg.config</path>
    </packageReference>
  </packageReferences>
</config>

Defines element types, stereotypes, and settings:

<?xml version="1.0" encoding="utf-8"?>
<settings version="3.1.1">
  <id>e4c0d250-d82d-47b1-9f5b-20f1403fb81e</id>
  <name>Module Builder</name>
  <designerReferences />
  <packageSettings />
  
  <elementSettings>
    <elementSetting type="Intent Module" typeId="intent-module-element">
      <icon type="UrlImagePath" source="data:image/svg+xml;base64,..."/>
      <saveMode>None</saveMode>
      <allowRename>true</allowRename>
      <allowAbstract>false</allowAbstract>
      <allowMapping>false</allowMapping>
      <allowFindReferences>false</allowFindReferences>
      <allowTypeReference>false</allowTypeReference>
      
      <creationOptions>
        <option order="0" type="element" typeId="intent-module-element">
          <text>New Module</text>
          <shortcut>ctrl + shift + m</shortcut>
          <defaultName>NewModule</defaultName>
          <icon type="UrlImagePath" source="..."/>
        </option>
      </creationOptions>
    </elementSetting>
  </elementSettings>
  
  <associationSettings>
    <associationSetting type="Dependency" typeId="dependency-association">
      <icon type="UrlImagePath" source="..."/>
      <targetEnd>
        <allowMultiple>true</allowMultiple>
        <navigable>true</navigable>
      </targetEnd>
    </associationSetting>
  </associationSettings>
  
  <stereotypeSettings>
    <stereotypeSetting name="Settings" typeId="settings-stereotype">
      <properties>
        <property name="Default Value" type="string" />
        <property name="Is Required" type="bool" />
      </properties>
    </stereotypeSetting>
  </stereotypeSettings>
  
  <scriptSettings />
  <modelerSettings />
  <mappers />
  <elementExtensions />
</settings>

Creating a Custom Designer

Create Designer in Module Builder

Right-click Designers folder in your module

Select New Designer

Configure:

Name: Your designer name (e.g., My Custom Designer)
ID: Unique identifier (auto-generated)

Define Element Types

Add element types that users can create:

<elementSetting type="Entity" typeId="entity-element">
  <icon type="UrlImagePath" source="data:image/svg+xml;base64,..."/>
  <saveMode>OwnFile</saveMode>
  <allowRename>true</allowRename>
  <allowAbstract>true</allowAbstract>
  <allowGenericTypes>false</allowGenericTypes>
  
  <creationOptions>
    <option order="0" type="element" typeId="entity-element">
      <text>New Entity</text>
      <shortcut>ctrl + shift + e</shortcut>
      <defaultName>NewEntity</defaultName>
    </option>
  </creationOptions>
  
  <childElementSettings>
    <childElementSetting typeId="attribute-element">
      <text>Attribute</text>
      <allowMultiple>true</allowMultiple>
      <autoSelectOnCreate>true</autoSelectOnCreate>
      
      <creationOptions>
        <option order="0" type="element" typeId="attribute-element">
          <text>Add Attribute</text>
          <shortcut>ctrl + shift + a</shortcut>
        </option>
      </creationOptions>
    </childElementSetting>
  </childElementSettings>
</elementSetting>

Define Association Types

Create relationships between elements:

<associationSetting type="Association" typeId="association-type">
  <icon type="UrlImagePath" source="data:image/svg+xml;base64,..."/>
  <defaultDisplayText>${Name}: ${TargetElement.Name}</defaultDisplayText>
  
  <sourceEnd>
    <allowMultiple>true</allowMultiple>
    <typeReferenceSetting>
      <isRequired>false</isRequired>
      <targetTypes>
        <type>entity-element</type>
      </targetTypes>
    </typeReferenceSetting>
  </sourceEnd>
  
  <targetEnd>
    <allowMultiple>true</allowMultiple>
    <navigable>true</navigable>
    <typeReferenceSetting>
      <isRequired>true</isRequired>
      <targetTypes>
        <type>entity-element</type>
        <type>value-object-element</type>
      </targetTypes>
    </typeReferenceSetting>
  </targetEnd>
  
  <creationOptions>
    <option order="0" type="association" typeId="association-type">
      <text>Add Association</text>
      <shortcut>ctrl + shift + r</shortcut>
    </option>
  </creationOptions>
</associationSetting>

Define Stereotypes

Add configurable properties to elements:

<stereotypeSetting name="Primary Key" typeId="primary-key-stereotype">
  <applicableToType>attribute-element</applicableToType>
  <properties>
    <property name="Auto-generate" type="bool" defaultValue="true">
      <display>Auto Generate</display>
      <hint>Whether to automatically generate the key value</hint>
    </property>
    <property name="Generator" type="select" defaultValue="identity">
      <options>
        <option>identity</option>
        <option>sequence</option>
        <option>guid</option>
      </options>
    </property>
  </properties>
</stereotypeSetting>

Configure Visual Settings

Customize how elements appear:

<elementSetting type="Entity" typeId="entity-element">
  <visualSettings>
    <elementVisualSettings>
      <defaultSize width="200" height="100"/>
      <minimumSize width="150" height="80"/>
      <fillColor>#E8F5E9</fillColor>
      <fontColor>#000000</fontColor>
      <border width="2" color="#4CAF50"/>
    </elementVisualSettings>
  </visualSettings>
</elementSetting>

Run Software Factory

Generate the designer files:

intent run-software-factory

Test the Designer

Build and package your module

Install in a test application

Open the designer

Create elements and verify functionality

Element Configuration

Save Modes

Control how elements are persisted:

<!-- Each element in its own file -->
<saveMode>OwnFile</saveMode>

<!-- All elements in parent's file -->
<saveMode>None</saveMode>

<!-- Elements grouped in folders -->
<saveMode>Folder</saveMode>

Element Properties

<elementSetting type="Service" typeId="service-element">
  <!-- Can be renamed by user -->
  <allowRename>true</allowRename>
  
  <!-- Can be marked abstract -->
  <allowAbstract>true</allowAbstract>
  
  <!-- Can be mapped from other designers -->
  <allowMapping>true</allowMapping>
  
  <!-- Shows "Find All References" option -->
  <allowFindReferences>true</allowFindReferences>
  
  <!-- Can reference types from type definitions -->
  <allowTypeReference>true</allowTypeReference>
  
  <!-- Supports generic type parameters -->
  <allowGenericTypes>true</allowGenericTypes>
  
  <!-- Can have documentation -->
  <allowDocumentation>true</allowDocumentation>
</elementSetting>

Child Elements

Define parent-child relationships:

<childElementSettings>
  <childElementSetting typeId="operation-element">
    <text>Operation</text>
    <allowMultiple>true</allowMultiple>
    <autoSelectOnCreate>true</autoSelectOnCreate>
    <requiresSelection>false</requiresSelection>
    
    <creationOptions>
      <option order="0" type="element" typeId="operation-element">
        <text>Add Operation</text>
        <shortcut>ctrl + o</shortcut>
        <defaultName>NewOperation</defaultName>
      </option>
    </creationOptions>
    
    <childElementSettings>
      <childElementSetting typeId="parameter-element">
        <text>Parameter</text>
        <allowMultiple>true</allowMultiple>
      </childElementSetting>
    </childElementSettings>
  </childElementSetting>
</childElementSettings>

Stereotype Configuration

Property Types

String
Bool
Select
Number

<property name="Description" type="string">
  <display>Description</display>
  <hint>Detailed description of the element</hint>
  <defaultValue>Enter description...</defaultValue>
</property>

<property name="Is Required" type="bool">
  <display>Is Required</display>
  <defaultValue>true</defaultValue>
</property>

<property name="Type" type="select" defaultValue="string">
  <display>Data Type</display>
  <options>
    <option>string</option>
    <option>int</option>
    <option>decimal</option>
    <option>datetime</option>
  </options>
</property>

<property name="Max Length" type="int">
  <display>Maximum Length</display>
  <defaultValue>255</defaultValue>
  <minValue>1</minValue>
  <maxValue>8000</maxValue>
</property>

Stereotype Applicability

<stereotypeSetting name="Entity Settings" typeId="entity-settings">
  <!-- Apply to specific element types -->
  <applicableToTypes>
    <type>entity-element</type>
    <type>aggregate-element</type>
  </applicableToTypes>
  
  <!-- Apply to all elements -->
  <applicableToAll>false</applicableToAll>
  
  <properties>
    <property name="Table Name" type="string"/>
    <property name="Schema" type="string" defaultValue="dbo"/>
  </properties>
</stereotypeSetting>

Association Configuration

Basic Association

<associationSetting type="Reference" typeId="reference-association">
  <icon type="UrlImagePath" source="..."/>
  <displayText>${SourceEnd.Name} -> ${TargetEnd.Name}</displayText>
  
  <sourceEnd>
    <allowMultiple>false</allowMultiple>
    <navigable>false</navigable>
    <typeReferenceSetting>
      <isRequired>true</isRequired>
      <targetTypes>
        <type>entity-element</type>
      </targetTypes>
    </typeReferenceSetting>
  </sourceEnd>
  
  <targetEnd>
    <allowMultiple>true</allowMultiple>
    <navigable>true</navigable>
    <typeReferenceSetting>
      <isRequired>true</isRequired>
      <targetTypes>
        <type>entity-element</type>
      </targetTypes>
    </typeReferenceSetting>
  </targetEnd>
</associationSetting>

Bidirectional Association

<associationSetting type="Bidirectional" 
                    typeId="bidirectional-association">
  <sourceEnd>
    <allowMultiple>true</allowMultiple>
    <navigable>true</navigable>
    <typeReferenceSetting>
      <isRequired>true</isRequired>
      <targetTypes>
        <type>entity-element</type>
      </targetTypes>
    </typeReferenceSetting>
  </sourceEnd>
  
  <targetEnd>
    <allowMultiple>true</allowMultiple>
    <navigable>true</navigable>
    <typeReferenceSetting>
      <isRequired>true</isRequired>
      <targetTypes>
        <type>entity-element</type>
      </targetTypes>
    </typeReferenceSetting>
  </targetEnd>
</associationSetting>

Visual Customization

Element Appearance

<visualSettings>
  <elementVisualSettings>
    <!-- Default size -->
    <defaultSize width="200" height="120"/>
    
    <!-- Minimum size -->
    <minimumSize width="150" height="80"/>
    
    <!-- Colors -->
    <fillColor>#FFFFFF</fillColor>
    <fontColor>#000000</fontColor>
    
    <!-- Border -->
    <border width="1" color="#000000"/>
    
    <!-- Display text template -->
    <displayText>${Name}</displayText>
    
    <!-- Show children in compact mode -->
    <compactChildDisplay>true</compactChildDisplay>
  </elementVisualSettings>
</visualSettings>

Association Appearance

<visualSettings>
  <associationVisualSettings>
    <lineColor>#000000</lineColor>
    <lineWidth>1</lineWidth>
    <lineStyle>solid</lineStyle> <!-- solid, dashed, dotted -->
    
    <sourceEnd>
      <arrowStyle>none</arrowStyle> <!-- none, arrow, diamond, circle -->
      <label>${SourceEnd.Name}</label>
    </sourceEnd>
    
    <targetEnd>
      <arrowStyle>arrow</arrowStyle>
      <label>${TargetEnd.Name}</label>
    </targetEnd>
  </associationVisualSettings>
</visualSettings>

Icons

Add custom icons:

<!-- Embedded SVG -->
<icon type="UrlImagePath" 
      source="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0i..."/>

<!-- Font Awesome icon -->
<icon type="FontAwesome" source="database"/>

<!-- Material icon -->
<icon type="MaterialDesign" source="storage"/>

Context Menus and Shortcuts

Creation Options

<creationOptions>
  <option order="0" type="element" typeId="entity-element">
    <text>New Entity</text>
    <shortcut>ctrl + shift + e</shortcut>
    <defaultName>NewEntity</defaultName>
    <icon type="FontAwesome" source="database"/>
  </option>
  
  <option order="1" type="element" typeId="value-object-element">
    <text>New Value Object</text>
    <shortcut>ctrl + shift + v</shortcut>
    <defaultName>NewValueObject</defaultName>
  </option>
</creationOptions>

<contextMenuOptions>
  <option>
    <text>Generate Code</text>
    <scriptId>generate-code-script</scriptId>
    <icon type="FontAwesome" source="code"/>
    <shortcut>ctrl + g</shortcut>
  </option>
  
  <option>
    <text>Validate Model</text>
    <scriptId>validate-model-script</scriptId>
    <icon type="FontAwesome" source="check"/>
  </option>
</contextMenuOptions>

Designer Scripts

Add custom scripting behavior:

<scriptSettings>
  <script id="generate-code-script">
    <name>Generate Code</name>
    <script><!-- JavaScript code here --></script>
  </script>
  
  <script id="validate-model-script">
    <name>Validate Model</name>
    <script>
      // JavaScript validation logic
      if (!element.name) {
        showError("Element must have a name");
        return false;
      }
      return true;
    </script>
  </script>
</scriptSettings>

Mapping Configuration

Enable mapping between designers:

<mappingSettings>
  <mappableSetting>
    <targetTypes>
      <type>entity-element</type>
    </targetTypes>
    
    <sourceMappableElements>
      <element designerId="domain-designer-id" 
               elementTypeId="class-element"/>
    </sourceMappableElements>
  </mappableSetting>
</mappingSettings>

Package References

Include metadata from other modules:

<packageReferences>
  <packageReference packageId="caccdda9-26f4-49bf-8b73-cadc2220de16"
                    include="Intent.Common"
                    isExternal="false">
    <path>Intent.Common/Intent.Common.pkg.config</path>
  </packageReference>
</packageReferences>

Best Practices

Consistent Naming

Use descriptive element type names
Follow consistent naming patterns
Use proper capitalization
Avoid technical jargon where possible

Clear Icons

Use recognizable, distinct icons
Maintain consistent icon style
Ensure icons are visible at small sizes
Use color meaningfully

Intuitive Shortcuts

<!-- Reserve common shortcuts -->
<shortcut>ctrl + n</shortcut>  <!-- New element -->
<shortcut>ctrl + d</shortcut>  <!-- Duplicate -->
<shortcut>ctrl + delete</shortcut>  <!-- Delete -->

<!-- Use mnemonic shortcuts -->
<shortcut>ctrl + shift + e</shortcut>  <!-- Entity -->
<shortcut>ctrl + shift + v</shortcut>  <!-- Value Object -->
<shortcut>ctrl + shift + s</shortcut>  <!-- Service -->

Helpful Hints

<property name="Table Name" type="string">
  <display>Table Name</display>
  <hint>The name of the database table. If not specified, the entity name will be used.</hint>
  <defaultValue>${Name}</defaultValue>
</property>

Testing Designers

Build Module

Compile your module:

dotnet build --configuration Release

Package Module

Create the module package:

intent package create

Install in Test App

Install your module in a test application:

Create new Intent application

Add local repository

Install your module

Run Software Factory

Test Designer Functionality

Create elements of each type

Test all creation options

Verify stereotypes apply correctly

Test associations between elements

Verify shortcuts work

Check visual appearance

Troubleshooting

Designer not appearing

Check designer is registered in .imodspec
Verify designer files are included in module build
Ensure <designer> entry is correct
Check for XML syntax errors

Elements not creating

Verify creationOptions are defined
Check typeId matches element definition
Ensure parent-child relationships allow creation
Review Software Factory output for errors

Stereotypes not available

Check applicableToType matches element
Verify stereotype typeId is unique
Ensure stereotype is in correct .designer.settings file
Check for duplicate stereotype definitions

Next Steps

Creating Modules

Complete module creation guide

Creating Templates

Generate code from designer metadata

Module Builder

Module Builder module reference

Testing Modules

Test your custom designers

Getting Started

Core Concepts

Module Development

Module Categories

Language Support

Visual Modelers

​What are Designers?

​Designer Files

​Creating a Custom Designer

​Element Configuration

​Save Modes

​Element Properties

​Child Elements

​Stereotype Configuration

​Property Types

​Stereotype Applicability

​Association Configuration

​Basic Association

​Bidirectional Association

​Visual Customization

​Element Appearance

​Association Appearance

​Icons

​Context Menus and Shortcuts

​Creation Options

​Custom Menu Items

​Designer Scripts

​Mapping Configuration

​Package References

​Best Practices

​Consistent Naming

​Clear Icons

​Intuitive Shortcuts

​Helpful Hints

​Testing Designers

​Troubleshooting

​Next Steps