Hayri ASLAN Posted December 10, 2021 Share Posted December 10, 2021 Hello With below code you can change the apperance of the unimfileuploadbutton. BEFORE: AFTER: procedure TMainmForm.UnimFormReady(Sender: TObject); begin with UnimFileUploadButton1, JSInterface do begin JSAssign('element.dom.querySelector(".x-label-el").style.display', ['none']); JSAssign('element.dom.querySelector(".x-input-el").style.display', ['none']); JSAssign('element.dom.querySelector(".x-input-wrap-el").style.border', ['none']); JSAssign('element.dom.querySelector(".x-after-input-el").style.width', ['100%']); JSAssign('element.dom.querySelector("#ext-field-trigger-file-1").style.width', ['100%']); JSAssign('element.dom.querySelector("#ext-filebutton-1").style.width', ['100%']); JSAssign('element.dom.querySelector(".x-text-el").innerText', ['Take a Picture']); end; end; 2 Link to comment Share on other sites More sharing options...
likemike Posted March 31, 2022 Share Posted March 31, 2022 Hello Hayri! This post is very helpful. Can I set the background color und rounded edges too? Where can I find which elements are available and what are the possible settings? Regards Mike Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted April 1, 2022 Author Share Posted April 1, 2022 17 hours ago, likemike said: Hello Hayri! This post is very helpful. Can I set the background color und rounded edges too? Where can I find which elements are available and what are the possible settings? Regards Mike Hello Mike Please add below lines to your code. with UnimFileUploadButton1, JSInterface do begin JSAssign('element.dom.querySelector(".x-label-el").style.display', ['none']); JSAssign('element.dom.querySelector(".x-input-el").style.display', ['none']); JSAssign('element.dom.querySelector(".x-input-wrap-el").style.border', ['none']); JSAssign('element.dom.querySelector(".x-after-input-el").style.width', ['100%']); JSAssign('element.dom.querySelector("#ext-field-trigger-file-1").style.width', ['100%']); JSAssign('element.dom.querySelector("#ext-filebutton-1").style.width', ['100%']); JSAssign('element.dom.querySelector(".x-text-el").innerText', ['Take a Picture']); JSAssign('element.dom.querySelector(".x-inner-el").style.backgroundColor', ['red']); JSAssign('element.dom.querySelector(".x-inner-el").style.borderColor', ['red']); JSAssign('element.dom.querySelector(".x-inner-el").style.borderRadius', ['25px']); end; 1 Link to comment Share on other sites More sharing options...
likemike Posted April 1, 2022 Share Posted April 1, 2022 Works great! Last question: what about the text color? Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted April 1, 2022 Author Share Posted April 1, 2022 6 minutes ago, likemike said: Works great! Last question: what about the text color? Hello Mike you can use the below code JSAssign('element.dom.querySelector(".x-text-el").style.color', ['blue']); Link to comment Share on other sites More sharing options...
likemike Posted April 1, 2022 Share Posted April 1, 2022 Sorry to disturb again, but this JS-assignments work the first time. The second time I get an AJAX-error. The UnimFileUploadButton is placed on an extra form, which is closed and opened by the user. Should I clear the JS-assignments before assigning them? Thanks Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted April 1, 2022 Author Share Posted April 1, 2022 3 hours ago, likemike said: Sorry to disturb again, but this JS-assignments work the first time. The second time I get an AJAX-error. The UnimFileUploadButton is placed on an extra form, which is closed and opened by the user. Should I clear the JS-assignments before assigning them? Thanks Hi Can you make a simple test case so I can work on it Link to comment Share on other sites More sharing options...
likemike Posted April 2, 2022 Share Posted April 2, 2022 No problemunigui3.rar 1. press "Open form" on Mainform -> 2. form opens and all works fine 2. close the 2. form 3. press "Open form" on Mainform again -> error Link to comment Share on other sites More sharing options...
Hayri ASLAN Posted April 2, 2022 Author Share Posted April 2, 2022 6 hours ago, likemike said: No problemunigui3.rar 1. press "Open form" on Mainform -> 2. form opens and all works fine 2. close the 2. form 3. press "Open form" on Mainform again -> error Hello Mike, Please use below code. procedure TUnimForm1.UnimFormCreate(Sender: TObject); begin with UnimFileUploadButton1, JSInterface do begin JSCallGlobal('Ext.util.CSS.createStyleSheet', ['#'+JSId+' .x-inner-el{ '+ ' background-color: #f5e971; '+ ' border-color: #055af7; '+ ' border-radius: 25px; '+ ' border-width: bold; '+ '}'+ '#'+JSId+' .x-text-el{ '+ ' color: #525452; '+ ' font-weight: #525452; '+ '}'+ '#'+JSId+' .x-label-el{ '+ ' display: none; '+ '}'+ '#'+JSId+' .x-input-el{ '+ ' display: none; '+ '}'+ '#'+JSId+' .x-input-wrap-el{ '+ ' border: none; '+ '}'+ '#'+JSId+' .x-after-input-el{ '+ ' width: 100%; '+ '}'+ '#'+JSId+' .x-filetrigger{ '+ ' width: 95%; '+ ' margin-left: 1em; '+ '}'+ '#'+JSId+' .x-button-action{ '+ ' width: 100%; '+ '}' ]); end; end; procedure TUnimForm1.UnimFormReady(Sender: TObject); begin with UnimForm1.UnimFileUploadButton1, JSInterface do begin JSAssign('element.dom.querySelector(".x-text-el").innerText', ['New media']); end; end; 1 Link to comment Share on other sites More sharing options...
likemike Posted April 3, 2022 Share Posted April 3, 2022 That's working like a charm! Thanks!! Link to comment Share on other sites More sharing options...
Recommended Posts