After banging my head against a brick wall with the SDK Documentation for the last two or three hours, I finally have a working custom control (albeit, just a simple label / button replacement as an exercise for creating something larger).
The only thing I am now going around in circles on is the CSS - the user CSS changes are working fine, but the CSS piped in using SessionCSSURLs seems to be doing nothing for me at all.
Anyone actually got this working?
still going around with this.
i tested the passed CSS with a basic style allocated to all label s ( i.e. label {xxxx: yyyy;} ) and it works fine on a dynamically created label element within the control, but the id allocated styles using #controlID as listed in demos etc. don’t work.
has anyone actually had success with this latter method?
Could you show the code you have in the SessionCSSURLs event?
Essentially just built on from the example. As I said, the label style is being picked up correctly, but the ControlID version seems to have no effect:
// Return an array of CSS URLs for your control
// Here's one way to do this...
If MyControlCSS = Nil Then
MyControlCSS = New WebFile
MyControlCSS.Filename = "esf_mycontrol.css"
MyControlCSS.MIMEType = "text/css"
MyControlCSS.data = "#" + Self.ControlID + " { " + _
"color: red; " + _
"background-color: grey; " + _
"border: 1px solid black; " + _
" } " + _
"label { " + _
"background-color: yellow; " + _
" }"
MyControlCSS.Session = Nil // Very important, so this file will be available to all sessions
End If
Dim urls() As String
urls.Append MyControlCSS.URL
Return urlsOK, a little progress which explains why the CSS is not working, but I can’t now explain why the following is the case: the ControlID used in the CSS file is different from the ControlID of the resulting control displayed on the webpage.
Using the following from the WebSDK documentation:
let el = this.DOMElement();
I got the element then as a test wrote el.id into the caption of a label in the control as below to see what it should be using - it came up as #fDkE5l
mX.innerText = "#" + el.id
Examining my CSS file in the webpage source viewer however, the style name resulting from the SessionCSSURLs() event as shown previously is #XMqhK2, so no wonder the style is not being applied while explicit style names are working fine.
Am I doing something wrong here? - as far as I can see, I’ve copied the code exactly as described in the WebSDK documentation.
You should never rely on the ControlIDs being static during loading, and especially not when you’re defining the CSS as having a Nil session. On subsequent sessions, the ControlID would not be the same but you’d be passing the same CSS data. You should use classes instead of IDs in the scenario you’re working on.
Oh well the problem is that you’ve marked this css to be session independent (by setting Session to Nil) but you’re relying on it being session specific because of the ControlID.
so the examples are showing a wrong way of doing it ?
But if this is the case, how do I do it? All I’ve done here is copy exactly the code that was in the example.
Doesn’t this mean then that the example should NOT be using ControlID to name the style - surely, that means that a changing ControlID will result in the JS side never being able to know the original style name that was created when the CSS was passed? Shouldn’t the example therefore be using a fixed style name, rather than showing us to use the ControlID?
You could put the property on the control as a non-shared property and get rid of the option to set the session to nil.
I’ve been thinking about this since my last post and I really can’t see a proper solution to this if ControlID is being used to create style names.
Even within the same session, multiple uses of the control would result in multiple different control ID’s being in play (with each control on a web page by definition having its own unique ID). As a result, any CSS file that is sent to the browser would therefore not be viable for each control - you would essentially need a separate CSS file for every control that is created (I actually tried what you suggested BTW, just to see if I could get this running).
Surely then, the only way of ensuring that all copies of the control can use the same CSS file, is to dispense with ControlID and create a unique style name prefix based upon the type of control, not an individual control.
As an aside, I’ve now tried making MyControlCSS a non-shared, used Nil and the current session, but in every case I try the ControlID of the control does not match that used when the CSS is created.
I have sent the ID used in the JS constructor, the this.DOMElement() return and that available at the server end to the screen and they all match, but the ID used in the SessionCSSURLs() event never matches them. Where does this ControlID come from, because it does not seem to relate to the actual control being finally used (both server side and browser side)?