Create a popup window to show custom html on Axapta EP

In this post we will create a custom popup window to show your HTML stuff when you click on a lookup button. After reading this post, you can compose any type of HTML and should be good  to display this on your Ax EP Lookup like browser window.

Tested on: Ax 4.0

Let’s jump right on the development without wasting any more time. In my example I will use this popup window to show Item Image. The item image Url is saved in the ItemTable.
You can create any HTML.

Step 1: Create a new class tecWebImageLookup and extend it from WebCustomLookupWeblet.
     class tecWebImageLookup extends WebCustomLookupWeblet
    {
         Url                 imgUrl; //holds the image url.
    }

   Create a parm method for imgUrl member variable.
     protected Url parmImgUrl(Url _imgUrl = imgUrl)
    {
         ;
         imgUrl = _imgUrl;
         return imgUrl;
    }

   Class constructor.
    static tecWebImageLookup construct()
    {
        tecWebImageLookup wtl = new tecWebImageLookup();
        wtl.createProperties();
        return wtl;
     }

   Create a static class factory method:
    static tecWebImageLookup newParameters(URL imgUrl)
   {
        tecWebImageLookup  webImageLookup = tecWebImageLookup::construct();
        ;
        webImageLookup.parmImgUrl(imgUrl);
        return webImageLookup;
   }

   Create a run method. This method holds the actual code to create the required HTML.
   The coed is of few lines and I thought to preserve space, I should provide a link to copy the code. Currently this method contains some extra code in the run method, you can remove the same.

Step 2: Modify the EP page .
     We will modify the Item page and will add a WebEdit control with LookButton property set to Always.

  1. Find the web form to modify
    You must find the name of the specific WebForm in EP before you can edit it.
    • In EP, navigate to the page that contains the web form that you want to modify.
    • In the Site Actions menu, choose Edit Page.
    • In the Edit menu for the web form Web part, choose Modify Shared Web Part. The properties and settings for the Web part displays.
    • Examine the Display menu item property. This is display type Menu Item in Ax–>Web.
    • Check the web form attached with this menu item.
  2. Modify the web form
    Edit the web form found in above step.
    • Add a WebEdit control as you would add any other standard Ax form control.
    • Modify it’s properties so that only lookup button associated with this control and it’s label is displayed not the textbox itself.
    • Now edit the Lookup method of this control. We will call our custom class from this method. In the parameters pass the Item Url.
      public void lookup(str _lookupValue)
          tecWebImageLookup          webImageLookup;
          ; 
          tecWebImageLookup::newParameters();
          webImageLookup = tecWebImageLookup::newParameters(Inventtable.OSSItemURL);
          webImageLookup.run(); 
      }


That’s it you are all set to check your code now. After clicking on the Lookup button, a new popup window will open containing your image.

End of post.

If you liked the story and want to see more of this kind of content, please follow our twitter handle @CursorRun or FB page @CursorRun
Default image
Rahul Sharma
Rahul is a technology enthusiast, solutions architect, trainer, and blogger, working on various Microsoft and open source solutions with more than 18 years of industry experience. He specially takes interest in designing enterprise applications, cloud integrations, IoT, and other architecture rich business solutions.

2 Comments

  1. Thanks a lot for this detail description! Very handy, I was wondering for ages how to do that…

  2. You are welcome Andy.

Leave a Reply

%d bloggers like this: