How to get epi style controls on admin page?

Wojciech Gabel

Vote:

Hi!
I have done a plug-in for episerver, using Razor views. It uses admin page to display settings.
I want to display those settings using epi styles, used on every admin page. I am using those styles by getting them from episerver:

@Html.Raw( Html.ShellCssLink( "ClientResources/epi/themes/legacy/system.css" ) )
@Html.Raw( Html.ShellCssLink( "ClientResources/epi/themes/legacy/ShellCore.css" ) )
@Html.Raw( Html.ShellCssLink( "ClientResources/epi/themes/legacy/ShellCoreLightTheme.css" ) )

But now, to have basic control that looks like the rest of epi, like the epi Save button, I need to reconstruct it's classes in html like this:

<div class="epi-buttonContainer">
<span class="epi-button">
<span class="epi-button-child">
<input class="epi-button-child-item" id="saveSettingsButton" type="submit" value="Save" form="botform">
</span>
</span>
</div>

Unfortunetly I could not find a class that would contruct those for me.

Does episerver have a helper class that does this automatically? Like Asp helpers, for example @html.Label()?

#201246

Feb 11, 2019 10:31

Scott Reed

Vote:

Most of the tools in those interfaces are either legacy and still done using WebForms. It's on the roadmap for Episerver at the partner event last week that we're finally moving to .NET Core 3.0 so everything will change but if your using razor files as we are for the admin plugins you've just got to render them yourself.

You can extract the CMS.zip file in the modules folder if you want to see examples of the WebForm markup. Here for example in the Edit Security control EditSecurity.aspx

<asp:Content ContentPlaceHolderID="MainRegion" runat="server">
    <br />
    <EPiServerUI:ToolButton ID="SaveButton" IsDialogButton="True" Enabled="false" DisablePageLeaveCheck="true" OnClick="SaveButton_Click" OnClientClick="onClick();" runat="server" Text="<%$ Resources: EPiServer, button.save %>" ToolTip="<%$ Resources: EPiServer, button.save %>" SkinID="Save" />
    <EPiServerUI:ToolButton id="UserGroupAddButton" IsDialogButton="False" GeneratesPostBack="False" OnClientClick="OpenUserGroupBrowser(0);" runat="server"  Text="<%$ Resources: EPiServer, button.addusergroupsid %>" ToolTip="<%$ Resources: EPiServer, button.addusergroupsid %>" SkinID="AddUserGroup" />
    <br />
    <br />
    <EPiServerUI:MembershipAccessLevel CssClass="EPEdit-sidAccessLevel" SaveButtonID="SaveButton"  ID="sidList" runat="server" />
    <br />
      <div class="epi-formArea">
        <div class="epi-size25">
            <div>
                <asp:CheckBox runat="server" ID="IsInherited" onClick="setInputStatus();" Text="<%$ Resources: EPiServer, admin.security.inherit %>" ToolTip="<%$ Resources: EPiServer, admin.security.inheritinfo %>" cssclass="epiinheritaccess" /><br />
            </div>
        </div>
    </div>
    <hr />

    <EPiServer:Translate Text="#user" ID="RoleInfo" runat="server" />
    <ul>
        <asp:Repeater ID="ListRoles" runat="server">
            <ItemTemplate>
                <li>
                    <%# System.Web.HttpUtility.HtmlEncode(Container.DataItem.ToString()) %>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
<EPiServerScript:ScriptEvent ID="initScript" runat="server" EventType="load" EventTargetClientNode="window" EventHandler="setInputStatus" />
<EPiServerScript:ScriptEvent ID="ScriptEvent1" runat="server" EventType="load" EventTargetClientNode="window" EventHandler="StoreInitialAccessRights" />
</asp:Content>

As you can see they have WebForm controls but the same doesn't exist for Razor when working with the admin area that's more legacy.

Hope that helps

#201247

Feb 11, 2019 11:40