Build admin user Interface for custom module

Faris Rjoub asked on June 1, 2017 01:22

Hi, I am building new module to store some information that related to SKU products in Ecommerce site. The admin will use UI to navigate between the screens. The module have one class called "SubItems" which have one foreign field reference to SKUID in SKU class.

The whole point is to make master-details between the SKU products and new custom module class through Edit Button.

First I build a new UI screen for listing products (Ecommerce SKU list).as below code:

<cms:UniGrid runat="server" ID="UniGrid" OrderBy="skuname" IsLiveSite="false"
            Columns="skuid,skuname" DisplayMode="Simple" ShowActionsMenu="true" ShowFilter="true"
             ObjectType="ecommerce.sku" ShowObjectMenu="false" >
            <GridActions>
                <ug:Action Name="edit" Caption="$General.Edit$" FontIconClass="icon-edit" FontIconStyle="Allow" />
            </GridActions>
            <GridColumns>
                <ug:Column Source="skuname" Caption="Course Name"   Wrap="false">
                    <Filter Type="text" />
                </ug:Column>
                <ug:Column CssClass="filling-column" />
            </GridColumns>
            <GridOptions DisplayFilter="true" />
        </cms:UniGrid>

with C# Code as below to handle edit action :

protected void uniGrid_OnAction(string actionName, object actionArgument)
{
    var id = ValidationHelper.GetInteger(actionArgument, 0);
    if (actionName == "edit")
    {
        string url = UIContextHelper.GetElementUrl("LMS", "SubItemsList", false, id);
        URLHelper.Redirect(url);
    }
}

NB: SubItemsList is the User Interface created inside LMS module.

When editing one of products listed, an error appears

The object does not exist. It may have been deleted by someone else.

Please help how to achieve this.

module development ui admin area

Recent Answers

Brenden Kehren answered on June 1, 2017 06:54

When you debug your code, what does the URL render out to be? Are you sure you have the UI components setup properly?

0 votesVote for this answer Mark as a Correct answer

Faris Rjoub answered on June 1, 2017 09:07 (last edited on June 1, 2017 09:40)

The URL returned after debug is :

/CMSModules/AdminControls/Pages/UIPage.aspx?elementguid=b235e1e6-da00-41f4-b732-4cba44076a18&displaytitle=False&objectid=215

215 is the ID for the SKUID product after click edit. Related to Master Data.

Actually this is what i have done until now:

1- Create the Module with new class called SubItems that contains one field referenced to SKUID in SKU Class.

2- Create new custom UI to list all SKU products (Map to exiting .ASPX URL)

3- Create a new UI for SubItems class with Page template = object listing to list all details.

I think something wrong when mapping the master page with its detailed.

What i missed at this stage.

Thanks.

0 votesVote for this answer Mark as a Correct answer

Suneel Jhangiani answered on June 1, 2017 13:04

From what you describe I think that when you are clicking on the Edit button for one of the listed products the UI is redirecting to the next page. This page would use the 'EditedObject' value to know what data to load and in the example you give this would be the SKUID with ID 215.

I would suggest the first thing to look at is the Object type on the Properties tab of the UI on the page you are redirecting to when the user clicks on the edit button. This is probably set to '(inherit)' and I think you should be setting it to either your custom class or to 'Product (ecommerce.sku)'.

0 votesVote for this answer Mark as a Correct answer

Faris Rjoub answered on June 1, 2017 15:18 (last edited on June 1, 2017 15:22)

Suneel, The object type is already assigned to the custom class.

What about adding custom extenders class to the UI !!?

For now , I need to know how detailed page will retrieved all subitems that are related to my SKU product. Thanks

0 votesVote for this answer Mark as a Correct answer

Suneel Jhangiani answered on June 1, 2017 18:34

If you use a Listing page type you shouldn't really need to add a custom extender. You would simply specify the UI Page type as Listing and on the Properties tab specify the Object Type as your custom class. You would then add a Grid definition XML file to ~/App_Data/CMSModules/{ModuleCodeName}/UI/Grids/{Object CodeName}/default.xml

You will need to use either Custom Pages or UI Extenders if you need to display more than the listing.

0 votesVote for this answer Mark as a Correct answer

Faris Rjoub answered on June 1, 2017 18:59

Thanks for your reply,

Yes, I have done that for my case , just listing the sub details items.

For now, I just check the link generated during the debug :

I replaced the objectid=215 to objectid=1. the page works and list all sub items.

it means that the objectid is used inside the query with primary key of the sub items (Custom class). I need to query to be checked with the SKUID (Foreign Key inside the custom class ) , because i need to get all sub item that match with parent ID.

Any ideas.

0 votesVote for this answer Mark as a Correct answer

Faris Rjoub answered on June 1, 2017 22:18

I tried to resolved my issue by adding new custom ASPX page which has whereCondition property for UniGrid in order to get only related items for SKU product ID which passed to the page by querystring . its woks fine. :)

0 votesVote for this answer Mark as a Correct answer