Custom CSHTML Report Page Creation

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

<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

@{
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

@{
    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

@{
    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

@{
    TheDotNetFactory.Framework.People.Components.Account acc = 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

@{
    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)

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

Typical Breadcrumb

<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

        @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

SearcherTemplateName: "EidAzureAccountWebSearch",

Wrap Tabs in HasAccess Checks

 @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

<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)

<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)

                <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

@{ 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)

@{ 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

    @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

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

Grid Column Formatter: DateTime

            <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

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

Grid Column Formatter: CheckBox

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

Example of a Non-Sortable Column with a Template

<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

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

Example Grid Column with link to MyTasks Item

<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

<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

<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

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

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

<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

        <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

<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

<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

<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

<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

<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

<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)

<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

<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

<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

<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)

    <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

<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

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

Example Usage of the Advanced Search Field

<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

        <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

    <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)

<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

                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

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

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

IN THIS ARTICLE