Instruction: Changing the Header Logo in Aras Innovator V12
Hello everyone, Here is a short instruction on how to change the client header logo when logged in into Aras V12. Whereas V11 used a simple .svg file inside the code tree, in V12 we need to dive a little deeper: Open the TOC and go to Administration > Configuration > Client Presentation Perform a search and open the single record that you find named 'JavaScript' On the 'JavaScript' item, click on the 'Global' item / URL On the 'Global' item, open the 'Command Bar Section' relationship and expand the 'Name' column Scroll down until you find an item with the name 'com.aras.innovator.cui_default.mwh_header' and open it On the 'com.aras.innovator.cui_default.mwh_header' item, open the 'Command Bar Section' relationship and expand the 'Name' column Find the item with the name 'com.aras.innovator.cui_default.mwh_header_logo' and open it Click 'Edit' and attach your logo file to the property that has the 'Image' label Note: using .svg files is recommended by Aras because it scales without stretching and your logo will not get blurry or pixelated (.svg is a vector format). I hope this helps. All the best from Almelo. Daan
Grid on WYSYWIG Forms Editor
I'd like this added to the body style of the iframe that is loaded in the Forms Editor (html.html_edit_form body.claro.body_edit_form). background-size: 12px 12px; background-image: linear-gradient(to right, #2000ff30 1px, transparent 1px), linear-gradient(to bottom, #2000ff30 1px, #fff 1px); background-repeat: unset; The result is the grid you see. I think this would be a nice UX enhancement that might turn on/off from some control in the editor toolbar.
UX - CSS Pseudo Selectors - Indicate Required and More!
One thing that irks me is submitting a form that isn't complete and not having an indication of what is missing until after attempted submission. We could color all the labels differently than the non-required, but I really wanted an asterisk in red to use just a little bit of contrast that is more relaxing to the user's eyes. What can I say; I'm an Innovator... Here is the result of styling individual labels using sudo selector ::after ...and here is a sample for various components that I put in the "Form Body" CSS: /* dropdown select label selector */ .sys_fn_type .aras-field__label::after, /* calendar label selector */ .sys_fn_pr_found_date .sys_f_label::after, /* textarea label selector */ .sys_fn_pr_description .sys_f_label::after, /* checkbox label selector */ .sys_fn_rc_investigation_required .sys_f_label::after { content: " *"; color: red; } Hope that helps somebody. I think it looks great. The non-required fields are apparent now (I didn't screen shot the entire form) and the required fields are evident at a glance. Lastly, I should mention that using pseudo selectors ALWAYS requires a "content" attribute - even if it is an empty string - or it won't show. EDIT: Well, we need to tell the user what it means just incase they are from another planet, so I'll use ::after again, but on the whole div of my last element: .sys_fn_prob_res_act_disposition::after { content: "* indicates required fields"; color: red; display: inline-block; margin-top: 1.5em; text-align: right; /* I couldn't achieve the placement result I wanted with right padding or margin, so I had to use width percentage */ width: 96%; } Voila! BONUS: See the light grey line (#ddd) above "Project Discovered"? That's using the pseudo selector ::before!
