Page Comparison

Possible Custom Page Locations

Root\UI\Web Sites\EmpowerID.Web\EmpowerID.Web.PortableAreas.Common\Views\CustomViews\Authenticated

Root\UI\Web Sites\EmpowerID.Web\EmpowerID.Web.PortableAreas.Common\Views\Reports

Root\UI\Web Sites\EmpowerID.Web\EmpowerID.Web.PortableAreas.Common\Views\ObjectTypeSearch

Grids not inline on a page but loaded as partials should be created here

Root\UI\Web Sites\EmpowerID.Web\EmpowerID.Web.PortableAreas.Common\Views\ViewOne

and Loaded Like this as tabs

Code Block
<div data-bind="eidTab: { Title: '@EidResx("ApprovalFlowPoliciesGrid", true)', Url: '@Url.Action("LoadPartial", "ViewOne", new { area = "Common", partial = "ApprovalFlowPoliciesGrid" } )' }"></div>

and loaded like this when used on ViewOne pages

Code Block

@{
Html.RenderPartial("Accordion", new LocalizedDataModel() { Text = EidResx("RbacAssigneeAssignmentGridTargetassigneeGroup").ToString(), Value = Url.HashedAction("LoadPartial", "ViewOne", "Common", new { partial = "RbacAssigneeAssignmentGrid", TargetAssigneeID = Model.GetProperty("GroupGUID") }, removeArea: false) });                             
}

Basic Page Skeleton

Code Block

@{
    Layout = "_Layout.cshtml";
    ViewBag.UINounID = new Guid("ABB34C92-B418-4734-B5EE-F27D094008BF");
    //ViewBag.SearchTitle = "Risk Management";

}

@if (EidAuthenticationHandler.HasAccessToPage(new Guid("d0dd4ac2-e166-4d72-ba65-e841b2fd3319")))
{

<div id="@ViewBag.UniqueID-tabstrip" data-bind="eidTabStrip: {}">

@if (EidAuthenticationHandler.HasAccessToPage(new Guid("db2c77de-600a-4ee8-9e3f-69f0381467bd")))
{
        <div data-bind="eidTab: { Title: '@EidResx("TabName", true)' }"></div>
        <div data-bind="eidTabPanel: {}">
                <div data-bind='eidGrid: { IsImplicit: true, grid: {
//Grid properties here

} }'>
//Columns here

        </div>
}
</div>

    }
    else
    {
    <div>
        <br>
        <br>
        <h1>@EidResx("AccessToPageDenied")</h1>
    </div>
    }

Header Section

Code Block

language	html

@{
    Layout = "_Layout.cshtml";
    ViewBag.ShowActions = false;
    ViewBag.UINounID = new Guid("ABB34C92-B418-4734-B5EE-F27D094008BF");
    var personGuid = EidContext.LoginPersonGuid == Guid.Empty ? EidContext.CurrentPersonGuid : EidContext.LoginPersonGuid;
    ViewBag.SearchTitle = "Risk Management";

}

Complex Header Example - Loading a Component to Retrieve a Property for Use as Parameter Value

Code Block

@{
    TheDotNetFactory.Framework.People.Components.Account acc = null;
    var isEditEnabled = !(!EidContext.HasAccessToWorkflow("RemoveAzRbacAssignment") || ViewBag.DisableEdit != null);
    var addNewUrl = isEditEnabled ? "eid.url('#w/assignazlocalrightscope?ApplicationID=" + ViewBag.ApplicationID + "&AzAssigneeAssignmentTypeID=4&ResourceSystemModuleID=" + ViewBag.ResourceSystemModuleID + "' )" : "null";
    if(ViewBag.AzureApplicationID != null || ViewBag.AzureApplicationID != Guid.Empty)
        {
        acc = TheDotNetFactory.Framework.People.Components.Account.GetServicePrincipalByAzureApplicationID(Guid.Parse(ViewBag.AzureApplicationID.ToString()));
        ViewBag.AssigneeID = acc.AccountGUID;
        }
}

Complex Header Example - `isEditEnabled` Property for Enabling Grid and URL for Create New

Code Block

@{
    var isEditEnabled = !(!EidContext.HasAccessToWorkflow("RemoveAzRbacAssignment") || ViewBag.DisableEdit != null);
    var addNewUrl = isEditEnabled ? "eid.url('#w/assignazlocalrightscope?ApplicationID=" + ViewBag.ApplicationID + "&AzAssigneeAssignmentTypeID=4&ResourceSystemModuleID=" + ViewBag.ResourceSystemModuleID + "' )" : "null";
}

Load Tooltips Templates (Optional)

Code Block
@{ Html.RenderAction("ResourceAttestationTooltips", "Templates"); }

Typical Breadcrumb

Code Block

<div class="eid-breadcrumbs-container">
        <a href="@Url.GetHomePageHashed()" class="eid-breadcrumbs">@EidResx("Home") ></a>
        <a href="#Common/Find/azureidentitymanager" class="eid-breadcrumbs">@EidResx("Azure Identities")</a>
    </div>

Basic Search Template - One Defined Per Grid on Page or in CSHTML if Grid is not inline

Code Block

        @Html.StartTemplate("EidBusinessRequestTypesWebSearch")
        <div class="eid-search ui-widget ui-widget-content eid-content eid-last ui-helper-clearfix"
             data-bind="eidForm: {}, focusFirstInput: true">
            <div class="eid-form-field fourcol">
                <label>
                    <span>@EidResx("SearchTerms"):</span>
                    <input type="text" data-bind="value: condition('SearchTerms')" />
                </label>
            </div>
            <div class="row">
                <button data-bind="jqButton: { disabled: $parent.DataSource.IsRefreshing }" class="eid-grid-search-button" type="submit">@Html.EidResx("EmpowerIDApplicationCommonWords_Search")</button>
            </div>
        </div>
        @Html.EndTemplate()

Property on Grid Object that Specifies its Search Template

Code Block
SearcherTemplateName: "EidAzureAccountWebSearch",

Wrap Tabs in HasAccess Checks

Code Block

 @if (EidAuthenticationHandler.HasAccessToPage(new Guid("4f919b9f-d592-493f-82c4-ae16cdd8a2a0")))
{
    <div data-bind="eidTab: { Title: '@EidResx("AzLocalRiskRulesGrid", true)', Url: '@Url.Action("AzLocalRiskRulesGrid", "ViewOne", new { area = "Common" })' }"></div>
}

Grids Can Be Inline in the Page or Loaded from another CSHTML - Example Loading from a File

Code Block
<div data-bind="eidTab: { Title: '@EidResx("ApprovalFlowPoliciesGrid", true)', Url: '@Url.Action("LoadPartial", "ViewOne", new { area = "Common", partial = "ApprovalFlowPoliciesGrid" } )' }"></div>

Example of Adding a Location Tree to a Grid (Add after last grid column)

Code Block

<div data-bind='eidGridPanel: { Type: "Left", Title: "@EidResx("Locations", EscapeMode.HtmlAttribute)", CloseOnTarget: ".eid-tree-node-link" }'>
<div data-bind='eidStandaloneTree: { url: eid.url.api.services("Tree/GetOrgZones?hideITNodes=false&parentID=200"), useGuid: false, Mode: "Slim", value: DataSource.parameter("OrgZoneID"), AutoLoad: true }'></div>
</div>

Example of an Action Panel for Grid (Add after Location Tree Panel or last grid column)

Code Block

                <div data-bind='eidGridPanel: { Type: "Left", Title: "@EidResx("Locations", EscapeMode.HtmlAttribute)", CloseOnTarget: ".eid-tree-node-link" }'>
                    <div data-bind='eidStandaloneTree: { url: eid.url.api.services("Tree/GetOrgZones?hideITNodes=false&parentID=200"), useGuid: false, Mode: "Slim", value: DataSource.parameter("OrgZoneID"), AutoLoad: true }'></div>
                </div>
                <div data-bind='eidGridPanel: { Type: "Right", Title: "@EidResx("Actions", EscapeMode.HtmlAttribute)" }'>
                    <!-- ko 'if': SelectedRow() -->
                    <div class="eid-grid-selected-bar"></div>
                    <div class="eid-grid-selected">
                        <div class="eid-panel-area" data-bind="'with': SelectedRow().DataItem">
                            <h4 class="eid-panel-area-title">
                                <span>@EidResx("ActionsFor") </span>
                                <a class="eid-text-link" data-bind='text: FriendlyName(), attr: { "href": "@Url.HashedContent("Common/ViewOne/Component?id=")" + AccountID() + "&componentName=Account", "title": FriendlyName }'></a>
                            </h4>
                            <div class="eid-panel-area-body">
                                <div data-bind='eidDataSource: {
                                                autoRefresh: true,
                                                dataSource: {
                                                    Url: "@Url.AreaAction("ActionsByResourceIDNounModels", "NounVerbAction", "Common")",
                                                    Parameters: { resourceId: ResourceID, noun : "AzureUser"  }
                                            }
                                            }'>
                                    <ul class="eid-link-list">
                                        <!-- ko foreach: DataView -->
                                        <li>
                                            <a class="eid-link-inverted" data-bind='text: FriendlyName, attr: { "title": Description, "href": Href }'></a>
                                        </li>
                                        <!-- /ko -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /ko -->
                    <div class="eid-panel-area">
                        <h4 class="eid-panel-area-title">
                            @EidResx("GeneralActions")
                        </h4>
                        <div class="eid-panel-area-body">
                            <div data-bind='eidDataSource: {
                                                autoRefresh: true,
                                                dataSource: {
                                                    Url: "@Url.AreaAction("ActionsByNoun", "NounVerbAction", "Common", new { noun = "AzureUser" })"
                                                }
                                            }'>
                                <ul class="eid-link-list">
                                    <!-- ko foreach: DataView -->
                                    <li>
                                        <a data-bind='text: FriendlyName, attr: { "title": Description, "href": Href }'></a>
                                    </li>
                                    <!-- /ko -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Grid Columns and Formatters

Example Link to Viewone Page by GUID

Code Block

@{ Html.RenderPartial("HyperLinkColumn", new TheDotNetFactory.EmpowerID.Web.PortableAreas.Common.Models.Shared.HyperLinkColumnModel()
  {
    Title = EidResx("Owner").ToString(),
    DataFieldName = "OwnerFriendlyName",
    AccessGuid = Guid.Parse("1998dc9b-d8df-421b-a9ce-31f029cf0893"),
    UrlFormat = Url.HashedContent("Common/ViewOne/ComponentByGuid?id={PersonID}", removeArea: false)
});}

Example Link to Viewone Page by ID (Int)

Code Block

@{ Html.RenderPartial("HyperLinkColumn", new TheDotNetFactory.EmpowerID.Web.PortableAreas.Common.Models.Shared.HyperLinkColumnModel()                    {
  Title = EidResx("EmpowerIDComponentProperties_PersonView.Login").ToString(),
  DataFieldName = "EmpowerIDLogon",
  AccessGuid = Guid.Parse("1998dc9b-d8df-421b-a9ce-31f029cf0893"),
  UrlFormat = Url.HashedContent("Common/ViewOne/Component?id={PersonID}&componentName=Person", removeArea: false)
});}

Examples of Grid Column Templates

Code Block

    @Html.StartTemplate("EidGridColumnAZIChangeTypeTemplate")
    <span data-bind="attr: { title: (!ToolTip()).toString() }, css: {
        'eid-grid-decisions-approved' : !ParentRow.DataItem.Disabled(),
        'eid-grid-decisions-rejected' : ParentRow.DataItem.Disabled()
      }"></span>
    @Html.EndTemplate()
    
<div data-bind='eidGridColumn: { Title: "@EidResx("Type", EscapeMode.HtmlAttribute)", DataFieldName: "AccountTypeName", FormatType: "Custom" }'>
                    <div data-bind="attr: { title: DataItem.AccountTypeName() }, css: {
                     'eid-icon-person-small': DataItem.AccountTypeName() == 'User',
                     'eid-icon-management-small': DataItem.AccountTypeName() == 'Person',
                     'eid-icon-shared-credentials-small': DataItem.AccountTypeName() == 'ServicePrincipal',
                     'eid-icon-groups-small': DataItem.AccountTypeName() == 'ManagedIdentity' }">
                     </div>
</div>

Example of Usage of a Grid Column Template

Code Block
<div data-bind='eidGridColumn: { Title: "@EidResx("Enabled", EscapeMode.HtmlAttribute)", DataFieldName: "Disabled", TemplateName: "EidGridColumnAZIChangeTypeTemplate" }'></div>

Grid Column Formatter: DateTime

Code Block

            <div data-bind='eidGridColumn:  { Title: "@EidResx("ProcessTime", EscapeMode.HtmlAttribute)", DataFieldName: "ProcessTime", FormatType: "DateTime" }'></div>
            <div data-bind='eidGridColumn:  { Title: "@EidResx("LockedByServer", EscapeMode.HtmlAttribute)", DataFieldName: "LockedByServer", FormatType: "String" }'></div>

Grid Column Formatter: Force to String

Code Block
<div data-bind='eidGridColumn: { Title: "@EidResx("LockedByServer", EscapeMode.HtmlAttribute)", DataFieldName: "LockedByServer", FormatType: "String" }'></div>

Grid Column Formatter: CheckBox

Code Block
<div data-bind='eidGridColumn: { Title: "@EidResx("Team", EscapeMode.HtmlAttribute)", DataFieldName: "IsTeamsGroup", FormatType: "CheckBox" }'></div>

Example of a Non-Sortable Column with a Template

Code Block

<div data-bind='eidGridColumn:  {
  Title: "@EidResx("EmpowerIDGridTypeColumns_GroupAccountHistory.GroupAccountHistoryChangeTypeName", true)",
  DataFieldName: "GroupAccountHistoryChangeTypeName",
  EnableSorting: false,
  TemplateName: "EidGridColumnGroupChangeTypeTemplate"
}'></div>

Example of a Grid Column that Links to MyTasks

Add this to the header section

Code Block
@{ var myTasksMicroserviceURL = Config<string>("MyTasksMicroserviceURL"); Uri myTasksUri = new Uri(myTasksMicroserviceURL); }

Example Grid Column with link to MyTasks Item

Code Block

<div data-bind='eidGridColumn:  {
  Title: "@EidResx("ViewBusinessRequestItem", true)",
  DataFieldName: "FriendlyName",
  FormatType: "HyperLink",
  DataBag: {
      UrlFormat: "@((new Uri(myTasksUri, "/all/businessRequestItems?id={BusinessRequestItemID}")).ToString())"
      }
}'></div>

Example Grid Link to Old Workflow Tasks View One Page

Code Block

<div data-bind='eidGridColumn:  { Title: "@EidResxAttr("BusinessProcessTaskID")", DataFieldName: "BusinessProcessTaskID", FormatType: "Custom" }'>
  <!-- ko 'with': DataItem -->
  <a data-bind="text: BusinessProcessTaskID(), attr: { href:  eid.url('#Common/ViewOneTask/?id=' + BusinessProcessTaskID()) }"></a>
  <!-- /ko -->
</div>

Example Grid Column Formatter Changing a Number to a Text Value

Code Block

<div data-bind='eidGridColumn:  { Title: "@EidResx("ProcessStatus", EscapeMode.HtmlAttribute)", DataFieldName: "ProcessStatus", FormatType: "Custom"}'>
                <!-- ko 'with': DataItem -->
                <!-- ko 'if': ProcessStatus() == 0 -->
                <span data-bind='text:"@EidResx("Not Processed", EscapeMode.HtmlAttribute)"'></span>
                <!-- /ko -->
                <!-- ko 'if': ProcessStatus() == 1 -->
                <span data-bind='text:"@EidResx("In Progress", EscapeMode.HtmlAttribute)"'></span>
                <!-- /ko -->
                <!-- ko 'if': ProcessStatus() == 2 -->
                <span data-bind='text:"@EidResx("Processed", EscapeMode.HtmlAttribute)"'></span>
                <!-- /ko -->
                <!-- ko 'if': ProcessStatus() == 3 -->
                <span data-bind='text:"@EidResx("Error", EscapeMode.HtmlAttribute)"'></span>
                <!-- /ko -->
                <!-- ko 'if': ProcessStatus() == 4 -->
                <span data-bind='text:"@EidResx("Ignored", EscapeMode.HtmlAttribute)"'></span>
                <!-- /ko -->
                <!-- ko 'if': ProcessStatus() == 5 -->
                <span data-bind='text:"@EidResx("Pending Reprocessing", EscapeMode.HtmlAttribute)"'></span>
                <!-- /ko -->
                <!-- /ko -->
</div>

Advanced Search Templates

Typically styled using fourcol, fourcol, fourcol last

On the Grid itself, specify only SearchTerms for simple search if the view has SearchTerms on it

Code Block
SearcherTemplateName: "EidAzureAccountWebSearch", SearcherMode: "Advanced", Searcher: { SimpleOptions: [ { DataFieldName: "SearchTerms" } ], EnableSimpleMode: true },

Example of Advanced Search on a text field that is not a parameter

Code Block
<div class="eid-form-field fourcol"> <label> <span>@Html.EidResx("EmpowerIDLogin"):</span> <input type="text" data-bind="value: condition('EmpowerIDLogon')" /> </label> </div>

Example of Advanced Search on a Boolean field that is not a parameter

Code Block

        <div class="eid-form-field fourcol">
            <label>
                <span>@Html.EidResx("Disabled"):</span>
                <input type="checkbox" data-bind="eidCheckBox: { checked: condition('Disabled', null, null, 'Boolean'), enableTriState: true }" />
            </label>
        </div>

Example of Advanced Search on a Boolean field that is a parameter

Code Block

<div class="eid-form-field fourcol">
         <label>
              <span>@Html.EidResx("NeverLoggedInOnly"):</span>
              <input type="checkbox" data-bind="eidCheckBox: { checked: parameter('NeverLoggedInOnly', null, null, 'Boolean'), enableTriState: true }" />
         </label>
</div>

Example Date Range Search on a Single Column that is not a Parameter

Code Block

<div class="eid-form-field fourcol">
            <label class="ui-display-inline">
                <span>@EidResx("LastLogonTimeBetween")</span>
                <input type="date" data-bind="date: {
                        value: condition('LastLogonTime', null, 'GreaterThan', 'DateTime'),
                        viewModelFormat: 'toUTCZeroTimeString'
                     }" />
            </label>
</div>
<div class="eid-form-field fourcol last">
            <label class="ui-display-inline">
                <span>@EidResx("LastLogonTimeand")</span>
                <input type="date" data-bind="date: {
                        value: condition('LastLogonTime', null, 'LessThan', 'DateTime'),
                        viewModelFormat: 'toUTCMidnightTimeString'
                     }" />
            </label>
</div>

Example Date Range Search with Calculated Default Values

Code Block

<div class="sixcol">
            <div class="eid-form-field">
                <label class="ui-display-inline">
                    <span>Between</span>
                    <input type="date" data-bind="date: {
                        value: parameter('StartDate', Date.now().subtractDays(7).toUTCZeroTimeString()),
                        viewModelFormat: 'toUTCZeroTimeString'
                        }" />
                </label>
            </div>
</div>
<div class="sixcol last">
            <div class="eid-form-field">
                <label class="ui-display-inline">
                    <span>and</span>
                    <input type="date" data-bind="date: {
                        value: parameter('EndDate', Date.now().toUTCMidnightTimeString()),
                        viewModelFormat: 'toUTCMidnightTimeString'
                        }" />
                </label>
            </div>
</div>

Autocomplete Search for Person Sending PersonGUID as a Parameter Value to Method

Code Block

<div class="eid-form-field fourcol">
            <label>
                @EidResx("ByMember", true)
            </label>
<div class="eid-person-autocomplete" data-bind="eidAutocomplete: {
                value: parameter('PersonID'),
                ItemTemplateName: 'EidAutoCompletePerson',
                DataSource: { TypeName: 'PersonSearch', MethodName: 'GetSearch', parameters: { textToSearch: null } },
                valueField: 'PersonGUID',
                displayField: 'FriendlyName',
                otherFields: ['Login', 'PersonID'],
                TypeName: 'Person',
                InitialLoadType: 'Person',
                searchParameterName: 'textToSearch' }">
            </div>
</div>

More Up to Date threecol Style Example Person Autocomplete with PersonGUID as a Parameter

Code Block

<div class="eid-form-field threecol">
                    <label>
                        @Html.EidResx("InitiatorOrTargetPersonID")
                    </label>
                    <div data-bind="eidAutocomplete: { value: parameter('InitiatorOrTargetPersonID'),
                    componentName: 'PersonSearch',
                    methodName: 'GetSearch', displayField: 'FriendlyName', otherFields: ['PersonID','FriendlyName','PersonStoreFriendlyName','NetBiosName','LogonName','Login'],
                    initialValueDataSource: { componentName: 'PersonView', methodName: 'GetByPersonGUID', parameters: {personGuid: null }, displayField: 'FriendlyName' },
                    ItemHref: 'Common/ViewOne/ComponentByGuid?id={1}&componentName={0}',
                    TypeName: 'Person',
                    valueField: 'PersonGUID',
                    ItemTemplateName: 'EidAutoCompletePerson',
                    initialLoadType: 'Person' }">
                    </div>

</div>

AccountStoreGUID AutoComplete as a Parameter Example

Code Block

<div class="eid-form-field threecol">
                    <label>
                        @Html.EidResx("AccountStore")
                    </label>
                    <div data-bind="eidAutocomplete: { value: parameter('AccountStoreID'),
                    componentName: 'AccountStoreSearch',
                    methodName: 'GetSearch', displayField: 'FriendlyName', otherFields: ['AccountStoreID','FriendlyName','AccountStoreStoreFriendlyName','NetBiosName','LogonName','Login', 'SecurityBoundaryTypeName','FQN','Name'],
                    initialValueDataSource: { componentName: 'AccountStore', methodName: 'GetByAccountStoreGUID', parameters: {AccountStoreGuid: null }, displayField: 'FriendlyName' },
                    ItemHref: 'Common/ViewOne/ComponentByGuid?id={1}&componentName={0}',
                    TypeName: 'AccountStore',
                    valueField: 'AccountStoreGUID',
                    ItemTemplateName: 'EidAutoCompleteAccountStore',
                    initialLoadType: 'AccountStore' }">
                    </div>

</div>

Example Searching by an Enum Where the Component Doesn’t Have a View (Getall)

Code Block

<div class="eid-form-field fourcol">
        <label>
            <span>@Html.EidResx("ManagementRoleTypeFriendlyName"):</span>
            <select data-bind='eidCombobox: { EnableClear: true, Value: condition("ManagementRoleTypeID", null, null, "Int"), TextField: "FriendlyName", ValueField: "ManagementRoleTypeID",
                        DataSource: { SortByName: "FriendlyName", TypeName: "ManagementRoleType", DoesSupportSearch: false, DoesSupportPaging: false,
                         MethodName: "GetAll" } }'>
            </select>
        </label>
</div>

Non-Localized Example of Searching by location Tree as a Method Parameter

Code Block

<div class="eid-form-field fourcol last">
        <label>
            Location (In or Below)
        </label>
    <div data-bind="eidPopupTree: { ShowInline: true,
TreeType: 'OrgZone', nullValue: 0, value: parameter('OrgZoneID', 0),
DataBag: { SearchServerSide: true, EnableSearch: true, url: eid.url.api.services('Tree/GetOrgZones?hideITNodes=false&parentID=0') }
}"></div>
    </div>

Another Location Tree Example

Code Block

<div class="eid-form-field fourcol">
        <label>
            <span>@Html.EidResx("OrgZone"):</span>
            <div data-bind="eidPopupTree: { ShowInline: true, TreeType: 'OrgZone', nullValue: 0, value: parameter('OrgZoneID', null, null, 'Int'), DataBag: { SearchServerSide: true, EnableSearch: true, url: eid.url.api.services('Tree/GetOrgZones?hideITNodes=false&parentID=0') } }"></div>
        </label>
</div>

Example of Searching by OrgRole Tree as a Method Parameter

Code Block

<div class="eid-form-field fourcol">
        <label>
            @EidResx("Parent") @EidResx("Role")
        </label>
        <div data-bind="eidPopupTree: { ShowInline: true, TreeType: 'OrgRole', nullValue: 0, value: parameter('OrgRoleID', 0), DataBag: { SearchServerSide: true, EnableSearch: true } }"></div>
</div>

Example Searching by Business Role and Location (OROZ)

Code Block

    <div class="eid-form-field fourcol">
        <label>
            @EidResx("BusinessRoleAndLocationInOrBelow")
        </label>
        <div data-bind="eidPopupDualTree: { ShowInline: true, value: parameter('orgRoleOrgZoneID', 0), nullValue: 0 }"></div>
    </div>

Example: Hard Coding a Default Value for a Search Field

Code Block

<div class="eid-form-field fourcol">
        <label>
            <span>@Html.EidResx("MinimumPercentageOfPeopleInOROZ"):</span>
            <input type="text" data-bind="value: parameter('MinimumPercentageOfPeopleInOROZ', 40)" />
        </label>
</div>

Example: Loading a Default Search Field Value from a Resource System Config Setting

Add this line to the header code section to retrieve the value and does some parsing in this example

Code Block
var joinFilter = Config<string>("AccountInboxJoinFilter").Replace("\n", "").Replace("\r", "");

Example Usage of the Advanced Search Field

Code Block
<div class="eid-form-field fourcol"> <label> <span>@Html.EidResx("AccountInboxJoinFilter"):</span> <textarea data-bind="value: parameter('JoinFilter', '@joinFilter')" /> </label> </div>

Example AutoComplete Where Method Has Large # of Parameters

Code Block

        <div class="eid-form-field fourcol">
        <label>
            <span>@EidResx("AzGlobalRight")</span>
        </label>
        <div data-bind="eidAutocomplete: { value: parameter('AzGlobalRightID', '@ViewBag.AzGlobalRightID', null, 'Guid'),
                                   componentName: 'AzGlobalRightView',
                                   methodName: 'GetAllSearch', displayField: 'FriendlyName', otherFields: ['AzGlobalRightID','FriendlyName'],
                                   parameters: {
                                    ResourceSystemTypeModuleID: null,
                                    ResourceSystemTypeID: null,
                                    AzRightTypeID: null,
                                    OrgZoneID: null,
                                    ResourceTypeOperationID: null,
                                    AzGlobalRoleID: null,
                                    AzLocalRoleID: null,
                                    Denied: null,
                                    AzGlobalFunctionID: null,
                                    AzLocalFunctionID: null,
                                    AssigneeID: null,
                                    columnsToSearch: 'SearchTerms',
                                    textToSearch: null
                                            },
                                            valueField: 'AzGlobalRightID',
                                            ItemHref: 'Common/ViewOne/ComponentByGuid?id={1}&componentName={0}',
                                            initialValueDataSource: { componentName: 'AzGlobalRightView', methodName: 'GetByAzGlobalRightID', parameters: {AzGlobalRightID: null }, displayField: 'FriendlyName' },
                                            initialLoadType: 'AzGlobalRight',
                                            TypeName: 'AzGlobalRight' }">
        </div>
    </div>

ResourceSystem AutoComplete with Default Value Set to 1 = EmpowerID

Code Block

    <div class="eid-form-field fourcol last">
        <div data-bind="eidAutocomplete: { labelText: '@EidResx("System", true)',
             value: parameter('ResourceSystemID', 1, null, 'Int'), componentName: 'ResourceSystemView',
                    initialLoadType: 'ResourceSystem',
            TypeName: 'ResourceSystem',
                    methodName: 'GetAllSearch',
             parameters: { columnsToSearch: null },
                    displayField: 'FriendlyName',
                    valueField: 'ResourceSystemID',
                    searchParameterName: 'textToSearch',
                     }"></div>
    </div>

Auto-Complete Example Where it Looks Like the Default Value is Being Passed into the Page (i.e. ViewBag)

Code Block

<div class="eid-form-field fourcol last">
            <label>
                <span>@EidResx("Risk"):</span>
            </label>
<div data-bind="eidAutocomplete: { value: parameter('AzLocalRiskID', '@ViewBag.AzLocalRiskID', null, 'Guid'),
                                            componentName: 'AzLocalRiskView',
                                            methodName: 'GetAllSearch', displayField: 'FriendlyName', otherFields: ['AzLocalRiskID','FriendlyName'],
                                            parameters: {
                                            AzGlobalRiskID: null,
                                            AzRiskLevelID: null,
                                            AzLocalRiskTypeID: null,
                                            OrgZoneID: null,
                                            OwnerID: null,
                                            columnsToSearch: null
                                    },
                                            valueField: 'AzLocalRiskID',
                                            ItemHref: 'Common/ViewOne/ComponentByGuid?id={1}&componentName={0}',
                                            initialValueDataSource: { componentName: 'AzLocalRiskView', methodName: 'GetByAzLocalRiskID', parameters: {AzLocalRiskID: null }, displayField: 'FriendlyName' },
                                            initialLoadType: 'AzLocalRisk',
                                            TypeName: 'AzLocalRisk' }">
            </div>
</div>

Grids

Searcher Section Properties

Code Block

                DoesSupportSearch: true,
                SearcherTemplateName: "EidSoDViolationWebSearch1-@searchTemplateGuid",
                EnableGroupBy: false,
                SearcherMode: "Advanced",
                Searcher: {
                    SimpleOptions: [
                        { DataFieldName: "Name", BooleanLogicType: "OR" },
                        { DataFieldName: "Login", BooleanLogicType: "OR" },
                        { DataFieldName: "ViolatorPersonFriendlyName", BooleanLogicType: "OR" },
                        { DataFieldName: "ViolatorPersonManagerFriendlyName", BooleanLogicType: "OR" },
                        { DataFieldName: "Description" }
                    ],
                    EnableSimpleMode: true,
                    SortByField: "CreatedDate",
                    SortByOrder: "Desc"
                },

DataSource Section

Example method with lots of parameters and the values can be passed into the page using the ViewBag

Code Block

DataSource: {
                    TypeName: "AzLocalRiskViolationView",
                    MethodName: "GetAllSearch",
                    Parameters: {
                        AzLocalRiskRuleID: '@ViewBag.AzLocalRiskRuleID',
                        AzLocalRiskID: '@ViewBag.AzLocalRiskID',
                        AzGlobalRiskID: '@ViewBag.AzGlobalRiskID',
                        ViolatorPersonID: '@ViewBag.ViolatorPersonID',
                        ViolatorOrgZoneID: '@ViewBag.ViolatorOrgZoneID',
                        AnyFunctionAssigneeID: '@ViewBag.AnyFunctionAssigneeID',
                        RiskFunctionAssigneeID: '@ViewBag.RiskFunctionAssigneeID',
                        RiskSegregatedFunctionAssigneeID : '@ViewBag.RiskSegregatedFunctionAssigneeID',
                        AnyFunctionAssigneeID : '@ViewBag.AnyFunctionAssigneeID',
                        MitigatorPersonID: '@ViewBag.MitigatorPersonID',
                        MitigationExpiringInXDays: '@ViewBag.MitigationExpiringInXDays',
                        LocalRiskOwner: '@ViewBag.LocalRiskOwner',
                        MitigationUnreviewed: '@ViewBag.MitigationUnreviewed',
                        HideViolationCombinations: '@ViewBag.HideViolationCombinations'
                    },
                    IncludedProperties: ["PersonID", "Login","ViolatorPersonDepartment", "ViolatorPersonTitle", "ViolatorPersonManagerFriendlyName","ViolatorPersonManagerEmail", "Name", "AzLocalRiskMitigationStatusID", "Email", "AzLocalRiskMitigationStatusFriendlyName", "LastMitigationStatusReview", "AzLocalRiskViolationID", "AzLocalRiskRuleName", "AzLocalRiskRuleID", "ApplicationID", "FriendlyName", "Name",
                        "Description", "ModifiedDate", "CreatedDate", "AzLocalRiskName", "ProtectedApplicationResourceID", "Expired", "HighestExpirationDate",
                        "AzLocalRiskFriendlyName", "AzRiskTypeFriendlyName", "MitigationOwnerAssigneeFriendlyName", "AzLocalRiskMitigationStatusFriendlyName", "AzLocalRiskViolatorMitigationID",
                        "RiskFunctionAssigneeFriendlyName", "RiskSegregatedFunctionAssigneeFriendlyName", "RiskType",
                        "AzLocalRiskMitigationStatusFriendlyName", "MitigationOwnerAssigneeFriendlyName", "AzLocalRiskID"
                    ],
                    DoesSupportSearch: true
}

Report Options Settings

Code Block

ReportOptions: {
  Columns: [{ DataFieldName: "Login", Title: "Login Name"}, { DataFieldName: "Email", Title: "Email" }],
  ReportTitle: "@EidResx("LastLoginTitle")",
  ReportDescription: "@EidResx("LastLoginDescription")",
  ReportLocation: "#Common/Find/azurelicensemanager"
},

Creating Custom Pages Using the WF Studio Page Designer

See the following topic:

Create a simple page with advanced search

URL for Page Designer Pages - https://yourserver/UI/#common/pages/view/RBACViewID

Div

style	float:left; position:fixed;
id	articleNav

IN THIS ARTICLE

Table of Contents

maxLevel	4
minLevel	2
style	none
printable	false

Insert excerpt

	IL:External Stylesheet
	IL:External Stylesheet
nopanel	true

Page Comparison

Versions Compared

Old Version 5

New Version Current

Key

Possible Custom Page Locations

Basic Page Skeleton

Header Section

Complex Header Example - Loading a Component to Retrieve a Property for Use as Parameter Value

Complex Header Example - isEditEnabled Property for Enabling Grid and URL for Create New

Load Tooltips Templates (Optional)

Typical Breadcrumb

Basic Search Template - One Defined Per Grid on Page or in CSHTML if Grid is not inline

Property on Grid Object that Specifies its Search Template

Wrap Tabs in HasAccess Checks

Grids Can Be Inline in the Page or Loaded from another CSHTML - Example Loading from a File

Example of Adding a Location Tree to a Grid (Add after last grid column)

Example of an Action Panel for Grid (Add after Location Tree Panel or last grid column)

Grid Columns and Formatters

Example Link to Viewone Page by GUID

Example Link to Viewone Page by ID (Int)

Examples of Grid Column Templates

Example of Usage of a Grid Column Template

Grid Column Formatter: DateTime

Grid Column Formatter: Force to String

Grid Column Formatter: CheckBox

Example of a Non-Sortable Column with a Template

Example of a Grid Column that Links to MyTasks

Example Grid Link to Old Workflow Tasks View One Page

Example Grid Column Formatter Changing a Number to a Text Value

Advanced Search Templates

On the Grid itself, specify only SearchTerms for simple search if the view has SearchTerms on it

Example of Advanced Search on a text field that is not a parameter

Example of Advanced Search on a Boolean field that is not a parameter

Example of Advanced Search on a Boolean field that is a parameter

Example Date Range Search on a Single Column that is not a Parameter

Example Date Range Search with Calculated Default Values

Autocomplete Search for Person Sending PersonGUID as a Parameter Value to Method

More Up to Date threecol Style Example Person Autocomplete with PersonGUID as a Parameter

AccountStoreGUID AutoComplete as a Parameter Example

Example Searching by an Enum Where the Component Doesn’t Have a View (Getall)

Non-Localized Example of Searching by location Tree as a Method Parameter

Another Location Tree Example

Example of Searching by OrgRole Tree as a Method Parameter

Example Searching by Business Role and Location (OROZ)

Example: Hard Coding a Default Value for a Search Field

Example: Loading a Default Search Field Value from a Resource System Config Setting

Example AutoComplete Where Method Has Large # of Parameters

ResourceSystem AutoComplete with Default Value Set to 1 = EmpowerID

Auto-Complete Example Where it Looks Like the Default Value is Being Passed into the Page (i.e. ViewBag)

Grids

Searcher Section Properties

DataSource Section

Report Options Settings

Creating Custom Pages Using the WF Studio Page Designer

Complex Header Example - `isEditEnabled` Property for Enabling Grid and URL for Create New