Skip to content

Commit 651ecbb

Browse files
Ramakrishnan24689Ramakrishnan24689
authored
feat:SubwayNav component added (#133)
* feat:SubwayNav component added
1 parent 149875e commit 651ecbb

File tree

147 files changed

+30668
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

147 files changed

+30668
-1
lines changed

‎.github/workflows/create-release.yml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,9 @@ jobs:
100100
- run: npm ci
101101
working-directory: "./Shimmer"
102102
- run: npm ci
103-
working-directory: "./Spinner"
103+
working-directory: "./Spinner"
104+
- run: npm ci
105+
working-directory: "./SubwayNav"
104106
- run: npm ci
105107
working-directory: "./TagList"
106108
- run: npm ci

‎.github/workflows/pr_validate_all.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ jobs:
3232
- "./SearchBox"
3333
- "./Spinner"
3434
- "./Shimmer"
35+
- "./SubwayNav"
3536
- "./TagList"
3637

3738

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ The following table provides an index to the code components in this repository:
3333
| [SearchBox](SearchBox) | User Interface | [Fluent UI SearchBox control](https://developer.microsoft.com/en-us/fluentui#/controls/web/searchbox) for use in canvas & custom pages. | **✅** | **✅** | **✅** | ⬜ | ⬜ |
3434
| [Shimmer](Shimmer) | User Interface | This code component wraps the [Fluent Shimmer control](https://developer.microsoft.com/en-us/fluentui#/controls/web/shimmer) for use in canvas & custom pages. | **✅** | **✅** | **✅** | ⬜ | ⬜ |
3535
| [Spinner](Spinner) | User Interface | This code component wraps the [Fluent Spinner control](https://developer.microsoft.com/en-us/fluentui#/controls/web/spinner) for use in canvas & custom pages. | **✅** | **✅** | **✅** | ⬜ | ⬜ |
36+
| [SubwayNav](SubwayNav) | User Interface | | **✅** | **✅** | **✅** | ⬜ | ⬜ |
3637
| [TagList](TagList) | User Interface | This code component provides a Tag List that provides flexible width rendering bound to a collection. | **✅** | **✅** | **✅** | ⬜ | ⬜ |
3738

3839
## Building & Deploying

‎Solution/Solution.cdsproj

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
<ProjectReference Include="..\SearchBox\SearchBox.pcfproj" />
6363
<ProjectReference Include="..\Shimmer\Shimmer.pcfproj" />
6464
<ProjectReference Include="..\Spinner\Spinner.pcfproj" />
65+
<ProjectReference Include="..\SubwayNav\SubwayNav.pcfproj" />
6566
<ProjectReference Include="..\TagList\TagList.pcfproj" />
6667
<ProjectReference Include="..\ThemeGenerator\themeGenerator.pcfproj" />
6768
</ItemGroup>

‎SubwayNav/.eslintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Ignore Forked components for linting
2+
/SubwayNav/utilities

‎SubwayNav/.eslintrc.json

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es2021": true
5+
},
6+
"extends": [
7+
"eslint:recommended",
8+
"plugin:react/recommended",
9+
"plugin:@typescript-eslint/recommended"
10+
],
11+
"parser": "@typescript-eslint/parser",
12+
"parserOptions": {
13+
"ecmaFeatures": {
14+
"jsx": true
15+
},
16+
"ecmaVersion": 12,
17+
"sourceType": "module"
18+
},
19+
"plugins": [
20+
"react",
21+
"react-hooks",
22+
"@typescript-eslint",
23+
"prettier",
24+
"sonarjs"
25+
],
26+
"settings": {
27+
"react": {
28+
"pragma": "React",
29+
"version": "detect"
30+
}
31+
},
32+
"ignorePatterns": ["**/generated/*.ts"],
33+
"rules": {
34+
"eqeqeq": [2, "smart"],
35+
"react-hooks/exhaustive-deps": "warn",
36+
"prettier/prettier": "error",
37+
"arrow-body-style": "off",
38+
"prefer-arrow-callback": "off",
39+
"linebreak-style": [
40+
"error",
41+
"windows"
42+
],
43+
"quotes": [
44+
"error",
45+
"single"
46+
],
47+
"semi": [
48+
"error",
49+
"always"
50+
]
51+
}
52+
}

‎SubwayNav/.gitignore

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# generated directory
7+
**/generated
8+
9+
# output directory
10+
/coverage
11+
12+
# output directory
13+
/out
14+
15+
# msbuild output directories
16+
/bin
17+
/obj

‎SubwayNav/.prettierrc.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"semi": true,
3+
"trailingComma": "all",
4+
"singleQuote": true,
5+
"printWidth": 120,
6+
"tabWidth": 4,
7+
"endOfLine": "auto"
8+
}

‎SubwayNav/README.md

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
# SubwayNav
2+
3+
This code component provides a SubwayNav that allows you to visualize the steps required for a given wizard & it is bound to a collection.
4+
5+
| Canvas apps | Custom pages | Model-driven apps | Portals |
6+
| ----------- | ------------ | ----------------- | ------- |
7+
| ✅ | ✅ | ⬜ | ⬜ |
8+
9+
## Glimpse of SubwayNav
10+
11+
<img src="./media/SubwayNav-Action.gif" alt="SubwayNav" width="200"/>
12+
13+
## Configuration
14+
15+
The control accepts the following properties:
16+
17+
- **Items** - The action items to render
18+
- **ItemKey** - The key to use to indicate which item/step is selected. The keys must be unique.
19+
- **ItemLabel** - Label for the step
20+
- **ItemState** - Specifying the state of the step. Here is the list of State available. Current|NotStarted|Completed|Unsaved|ViewedNotCompleted|Error|CurrentWithSubSteps|Skipped|WizardComplete
21+
22+
- **SubwayNav state** - To mark the overall state of SubwayNav to Complete or Error.
23+
24+
### Style Properties
25+
26+
- **Theme** - Accepts a JSON string that is generated using [Fluent UI Theme Designer (windows.net)](https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/theming-designer/). Leaving this blank will use the default theme defined by Power Apps.
27+
- **AccessibilityLabel** - Screen reader aria-label
28+
- **ApplyDarkTheme** - Select in case Darktheme is used.
29+
30+
### Event Properties
31+
32+
- **InputEvent** - An event to send to the control. E.g. `SetFocus`. See below.
33+
34+
### Usage
35+
36+
Example of input collection value for Items property
37+
38+
```PowerFx
39+
Table({ItemKey:"1",ItemLabel:"Step 1",ItemState:"Current"},
40+
{ItemKey:"2",ItemLabel:"Step 2",ItemState:"Completed"},
41+
{ItemKey:"3",ItemLabel:"Step 3",ItemState:"Unsaved"},
42+
{ItemKey:"4",ItemLabel:"Step 4",ItemState:"ViewedNotCompleted"},
43+
{ItemKey:"5",ItemLabel:"Step 5",ItemState:"Error"},
44+
{ItemKey:"6",ItemLabel:"Step 6",ItemState:"WizardComplete"})
45+
```
46+
47+
To get the selected step by the user, use the OnSelect or OnChange Property
48+
49+
Example code below
50+
51+
```PowerFx
52+
Notify(Concatenate(Self.Selected.ItemLabel, " Selected & its status is ", Self.Selected.ItemState))
53+
```
54+
55+
#### Example for Substep scenarios
56+
57+
Below is a sample item collection example that defines how substeps needs to be linked with main/parent step using ParentItemKey.
58+
59+
```PowerFx
60+
Table({ItemKey:"1",ItemLabel:"Step 1",ItemState:"Current"},
61+
{ItemKey:"2",ItemLabel:"Step 2 have sub-steps",ItemState:"WizardComplete"},
62+
{ItemKey:"3",ItemLabel:"Sub Step 2.1",ParentItemKey:"2",ItemState:"Error"},
63+
{ItemKey:"4",ItemLabel:"Sub Step 2.2",ParentItemKey:"2",ItemState:"WizardComplete"},
64+
{ItemKey:"5",ItemLabel:"Sub Step 3.1",ParentItemKey:"8",ItemState:"ViewedNotCompleted"},
65+
{ItemKey:"6",ItemLabel:"Sub Step 3.2",ParentItemKey:"8",ItemState:"Unsaved"},
66+
{ItemKey:"7",ItemLabel:"Sub Step 3.2",ParentItemKey:"8",ItemState:"Unsaved"},
67+
{ItemKey:"8",ItemLabel:"Step 3 too have sub-steps",ItemState:"Unsaved"},
68+
{ItemKey:"9",ItemLabel:"Step 4",ItemState:"Error"},
69+
{ItemKey:"10",ItemLabel:"Step 5",ItemState:"WizardComplete"})
70+
```
71+
72+
### Output Schema
73+
74+
State of each item(Step) changes as we select or move to different step happens internally, especially the *Current* & *CurrentWithSubStep*. The current status can be determined using Output property called *Steps*.
75+
76+
Example code below
77+
78+
```PowerFx
79+
Self.Steps
80+
81+
//Or
82+
83+
SubwayNav1.Steps
84+
```
85+
86+
### Example Theme
87+
88+
The following is an example of setting the theme based on the output from the [Fluent UI Theme Designer (windows.net)](https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/theming-designer/).
89+
90+
```PowerFx
91+
Set(varThemeBlue, {
92+
palette: {
93+
themePrimary: ColorValue("#0078d4"),
94+
themeLighterAlt: ColorValue("#eff6fc"),
95+
themeLighter: ColorValue("#deecf9"),
96+
themeLight: ColorValue("#c7e0f4"),
97+
themeTertiary: ColorValue("#71afe5"),
98+
themeSecondary: ColorValue("#2b88d8"),
99+
themeDarkAlt: ColorValue("#106ebe"),
100+
themeDark: ColorValue("#005a9e"),
101+
themeDarker: ColorValue("#004578"),
102+
neutralLighterAlt: ColorValue("#faf9f8"),
103+
neutralLighter: ColorValue("#f3f2f1"),
104+
neutralLight: ColorValue("#edebe9"),
105+
neutralQuaternaryAlt: ColorValue("#e1dfdd"),
106+
neutralQuaternary: ColorValue("#d0d0d0"),
107+
neutralTertiaryAlt: ColorValue("#c8c6c4"),
108+
neutralTertiary: ColorValue("#a19f9d"),
109+
neutralSecondary: ColorValue("#605e5c"),
110+
neutralPrimaryAlt: ColorValue("#3b3a39"),
111+
neutralPrimary:ColorValue( "#323130"),
112+
neutralDark: ColorValue("#201f1e"),
113+
black: ColorValue("#000000"),
114+
white: ColorValue("#ffffff")
115+
}});
116+
117+
Set(varThemeBlueJSON,"{""palette"":{
118+
""themePrimary"": ""#0078d4"",
119+
""themeLighterAlt"": ""#eff6fc"",
120+
""themeLighter"": ""#deecf9"",
121+
""themeLight"": ""#c7e0f4"",
122+
""themeTertiary"": ""#71afe5"",
123+
""themeSecondary"": ""#2b88d8"",
124+
""themeDarkAlt"": ""#106ebe"",
125+
""themeDark"": ""#005a9e"",
126+
""themeDarker"": ""#004578"",
127+
""neutralLighterAlt"": ""#faf9f8"",
128+
""neutralLighter"": ""#f3f2f1"",
129+
""neutralLight"": ""#edebe9"",
130+
""neutralQuaternaryAlt"": ""#e1dfdd"",
131+
""neutralQuaternary"": ""#d0d0d0"",
132+
""neutralTertiaryAlt"": ""#c8c6c4"",
133+
""neutralTertiary"": ""#a19f9d"",
134+
""neutralSecondary"": ""#605e5c"",
135+
""neutralPrimaryAlt"": ""#3b3a39"",
136+
""neutralPrimary"": ""#323130"",
137+
""neutralDark"": ""#201f1e"",
138+
""black"": ""#000000"",
139+
""white"": ""#ffffff""
140+
}
141+
}");
142+
```
143+
144+
The Theme JSON string is passed to the component property, whilst the varTheme can be used to style other standard components such as buttons using the individual colors.

‎SubwayNav/SubwayNav.pcfproj

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3+
<PropertyGroup>
4+
<PowerAppsTargetsPath>$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v$(VisualStudioVersion)\PowerApps</PowerAppsTargetsPath>
5+
</PropertyGroup>
6+
7+
<Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" />
8+
<Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.props" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.props')" />
9+
10+
<PropertyGroup>
11+
<Name>SubwayNav</Name>
12+
<ProjectGuid>26a5c16a-fada-4f6a-a4fe-ba7b7da729de</ProjectGuid>
13+
<OutputPath>$(MSBuildThisFileDirectory)out\controls</OutputPath>
14+
<PcfBuildMode>production</PcfBuildMode>
15+
</PropertyGroup>
16+
17+
<PropertyGroup>
18+
<TargetFrameworkVersion>v4.6.2</TargetFrameworkVersion>
19+
<!--Remove TargetFramework when this is available in 16.1-->
20+
<TargetFramework>net462</TargetFramework>
21+
<RestoreProjectStyle>PackageReference</RestoreProjectStyle>
22+
</PropertyGroup>
23+
24+
<ItemGroup>
25+
<PackageReference Include="Microsoft.PowerApps.MSBuild.Pcf" Version="1.*" />
26+
<PackageReference Include="Microsoft.NETFramework.ReferenceAssemblies" Version="1.0.0" PrivateAssets="All" />
27+
</ItemGroup>
28+
29+
<ItemGroup>
30+
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\.gitignore" />
31+
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\bin\**" />
32+
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\obj\**" />
33+
<ExcludeDirectories Include="$(OutputPath)\**" />
34+
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.pcfproj" />
35+
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.pcfproj.user" />
36+
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.sln" />
37+
<ExcludeDirectories Include="$(MSBuildThisFileDirectory)\node_modules\**" />
38+
</ItemGroup>
39+
40+
<ItemGroup>
41+
<None Include="$(MSBuildThisFileDirectory)\**" Exclude="@(ExcludeDirectories)" />
42+
</ItemGroup>
43+
44+
<Import Project="$(MSBuildToolsPath)\Microsoft.Common.targets" />
45+
<Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.targets" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.targets')" />
46+
47+
</Project>

‎SubwayNav/SubwayNav/ContextExtended.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// This is undocumented - but needed since canvas apps sets non-zero tabindexes
2+
// so we must use the tabindex provided by the context for accessibility purposes
3+
export interface ContextEx {
4+
accessibility: {
5+
assignedTabIndex: number;
6+
assignedTooltip?: string;
7+
};
8+
}

‎SubwayNav/SubwayNav/ControlManifest.Input.xml

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest>
3+
<control namespace="PowerCAT" constructor="SubwayNav" version="0.0.1" display-name-key="SubwayNav" description-key="SubwayNav_Desc" control-type="virtual">
4+
<!-- Style Properties -->
5+
<property name="Theme" display-name-key="Theme" of-type="Multiple" usage="input" required="false" />
6+
<property name="AccessibilityLabel" display-name-key="AccessibilityLabel" of-type="SingleLine.Text" usage="input" required="false" />
7+
<!-- InputEvent : SetFocus -->
8+
<property name="InputEvent" display-name-key="InputEvent" of-type="SingleLine.Text" usage="input" />
9+
<!-- DarkModeOn : SetDarkTheme -->
10+
<property name="ApplyDarkTheme" display-name-key="ApplyDarkTheme" of-type="TwoOptions" usage="input" />
11+
<!-- Wizard Complete -->
12+
<property name="WizardCompleteorError" display-name-key="WizardCompleteorError" description-key="WizardCompleteorError" usage="input" of-type="Enum" required="false">
13+
<value name="None" display-name-key="None" description-key="None" default="true">None</value>
14+
<value name="WizardComplete" display-name-key="WizardComplete" description-key="WizardComplete">WizardComplete</value>
15+
<value name="Error" display-name-key="Error" description-key="Error">Error</value>
16+
</property>
17+
<!-- dataset node represents a set of entity records on CDS; allow more than one datasets -->
18+
<data-set name="items" display-name-key="Items">
19+
<property-set name="ItemLabel" display-name-key="Item Label" of-type="SingleLine.Text" usage="bound" required="true" />
20+
<property-set name="ItemKey" display-name-key="Key" of-type="SingleLine.Text" usage="bound" required="true" />
21+
<property-set name="ParentItemKey" display-name-key="Parent Key" of-type="SingleLine.Text" usage="bound" required="true" />
22+
<property-set name="ItemState" display-name-key="Item State" of-type="SingleLine.Text" usage="bound" required="true" />
23+
<property-set name="ItemDisabled" display-name-key="Item Disabled" of-type="TwoOptions" usage="bound" required="false" />
24+
<property-set name="ItemVisuallyDisabled" display-name-key="Item Visually Disabled" of-type="TwoOptions" usage="bound" required="false" />
25+
</data-set>
26+
<property name="Steps" display-name-key="Steps" of-type="Object" usage="output"/>
27+
<property name="StepsSchema" display-name-key="StepsSchema" of-type="SingleLine.Text" usage="bound" hidden="true"/>
28+
<property-dependencies>
29+
<property-dependency input="StepsSchema" output="Steps" required-for="schema" />
30+
</property-dependencies>
31+
<resources>
32+
<code path="index.ts" order="1" />
33+
<resx path="strings/Subwaynav.1033.resx" version="1.0.0" />
34+
<platform-library name="React" version="16.8.6" />
35+
<platform-library name="Fluent" version="8.29.0" />
36+
</resources>
37+
</control>
38+
</manifest>

‎SubwayNav/SubwayNav/ManifestConstants.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export const enum ManifestPropertyNames {
2+
dataset = 'dataset',
3+
}
4+
5+
export const enum ItemColumns {
6+
Label = 'ItemLabel',
7+
Key = 'ItemKey',
8+
State = 'ItemState',
9+
Disabled = 'ItemDisabled',
10+
VisuallyDisabled = 'ItemVisuallyDisabled',
11+
ParentKey = 'ParentItemKey',
12+
}
13+
14+
export const enum InputEvents {
15+
SetFocus = 'SetFocus',
16+
}
17+
18+
export const enum InputProperties {
19+
InputEvent = 'InputEvent',
20+
SelectedKey = 'SelectedKey',
21+
}

0 commit comments

Comments
 (0)