web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Finance | Project Operations, Human Resources, ... / Using Extensible contr...
Finance | Project Operations, Human Resources, ...
Suggested answer

Using Extensible control to show custom HTML code with CSS.

(1) ShareShare
ReportReport
Posted on by Eisenberk 87
Hello folks,
 
I am making a custom control to visualize html code with css. Since FormHTMLControl is deprecated, i am following the tutorial from: https://learn.microsoft.com/en-us/dynamics365/fin-ops-core/dev-itpro/user-interface/build-extensible-control
 
I created the classes 'mycontrol' and 'mycontrolbuild'. Also, i added the css and html resources. Now, before i begin to create the javascript file. I would like to test how the html code in the html file works with defualt values.
 
This is my html code in the html file:
 
<link href=//resources/styles/mycss.css/ rel=/stylesheet/ type=/text/css/ />
<div id=/mycontrol/ data-dyn-bind=/text:'test'/>
    <img id=/testimage/ src=https://mywebsite.com/test-image.jpg/
</div>
 
I added the control on a form. When i open the form, appears the /test/ text but nothing else. Why isn't the image displayed?
 
In the end i would like to add some <div>, since my project requierement is to show a custom html with css. How i do bind html code? 
 
Thanks in advance,
Eisenberk.
 
 
I have the same question (0)
  • Eisenberk Profile Picture
    Eisenberk 87 on at
    Using Extensible control to show custom HTML code with CSS.
    Ok, just to inform. Javascript file was necessary to show the main <div>. Keep working on it.
  • Suggested answer
    Bharani Preetham Peraka Profile Picture
    Bharani Preetham Pe... 3,634 Moderator on at
    Using Extensible control to show custom HTML code with CSS.
    As per my understanding you still require a js file to call this html code. Without much code too for fno this is required to call html file. So just add these html and css in the resources and call them by providing location in js file. Then it works.
  • Eisenberk Profile Picture
    Eisenberk 87 on at
    Using Extensible control to show custom HTML code with CSS.
    Hi Bharani Preetham Peraka,
     
    Indeed, .js file was necessary. My next problem is how to change a <div> value from the js file. I tried the code: 
     
    $('#mydivID').update(newValue)
     
    But it doesn't seems to work. I am not sure how to access  and modify the html content from the js file.
  • Suggested answer
    Judy Profile Picture
    Judy Microsoft Employee on at
    Using Extensible control to show custom HTML code with CSS.
    Hi, thanks for your sharing. please post on the Finance Forum for more assistance.
    • Please Check the image URL, ensure that the image URL "https://mywebsite.com/test-image.jpg" is correct and accessible. You can try opening the image URL directly in a web browser to verify if it loads correctly.
    • For your code, you should make sure that the '<img>' tag is properly closed with a closing angle bracket '>'. Also, ensure that the "id" attribute value matches the one used in the JavaScript code or CSS styling.
    • Please review the CSS styles defined in the "mycss.css" file. Ensure that there are no conflicting styles or rules that might be affecting the display of the image. You can use browser developer tools to inspect the applied styles and troubleshoot any potential issues.
     
    Best Regards,
    Judy
     
  • hca Profile Picture
    hca 158 on at
    Using Extensible control to show custom HTML code with CSS.
    Hi
     
    The use of the "$" sign in this case, what is your intention behind it? It might not mean the same in the context of Finance and Operations as you expect. It was my experience that jQuery is not working as you expect in this environment.
     
    If you try to get to the element by using "document.getElementById('mydivID')", are you able to get the element that way?

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Abhilash Warrier – Community Spotlight

We are honored to recognize Abhilash Warrier as our Community Spotlight honoree for…

Congratulations to the September Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Finance | Project Operations, Human Resources, AX, GP, SL

#1
CA Neeraj Kumar Profile Picture

CA Neeraj Kumar 1,922

#1
CA Neeraj Kumar Profile Picture

CA Neeraj Kumar 1,922

#3
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 835 Super User 2025 Season 2

Last 30 days Overall leaderboard

Featured topics

End-of-life Announcement for Microsoft Dynamics GP

Product updates

Dynamics 365 release plans