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 - Collapse TOC - v12
I'd really like to collapse this tree dijit widget. I know it is possible: https://dojotoolkit.org/reference-guide/1.10/dijit/Tree-examples.html onclick="mytree.collapseAll();" But, where!? This should be a simple button add and oh-so-convenient! It is hard for me to track down just where this tree is instantiated. Gosh, I really need to get through "Configuring Solutions" so I can finally email from this thing (I think page 101, where you're editing forms for use in the view(s) of ItemTypes is a big light on the path for me). But, I think my attention to UX might help improve Innovator while it makes me segue a LOT. From viewing rendered source it looks like you could use pure JS to do this. You'd find all the "secondary" or "TOC" li elements with: class="aras-nav__parent aras-nav__parent_expanded" ...and remove all the aras-nav_parent__expanded(s), leaving just, "aras-nav__parent".UX - Secondary Nav - Goto Form(s)
I want to get this View/Form(s) data from the SOAP response that happens between the selection of an ItemType and the building of that IT's Secondary Nav. I then want to use my new friend, aras.uiShowItem("Form", the_form_id) to go straight to the related form(s) for an Item Type. This is another (especially administrative) convenience I'd like to implement for smooth sailing.
What is the easiest way to show a placeholder when an item selector is empty?
Hi community, does any one of you know a nice solution for a placeholders in item selectors where users haven´t assigned an item? I am looking for a solution for the following CM Form. As you can see I use 3 properties where users can assigned "Reviewers". The amount of required reviewers depends on the change it self, so it can happen, that a few of the fields are empty. In my case I use some additional text on the right side of the properties that give some additional hints. But the text doesn´t look good when there were no people assigned. In this case there is a huge white gap between the additional text and the property label and it´s hard to see that the helptext and the property belong together. From my POV a simple placeholder for empty item properties would be the easiest solution to improve this UI situation. I don´t want to use additional html elements that are hidden/shown by Method. I would be more happy to find a global solution that is reusable across multiple Forms without having to add (and control) additional html placeholder elements all time. I made some first successful test to simply overwrite the element by Method. As you can see in my picture, I was able to assign a custom text as item link (you can identity the property by it´s class) It´s not possible to click the "-- No user assigned --" link, nothing will happen when user click this fake value. But already this simple placeholder brings some benefit. Also it still requires the use of an additional Method in the Form to make the value appear, so I wonder if we can simplify this task even more. Does anyone of you knows other simple and fast solution to add these kind of placeholders? Thanks for any idea! Angela
Cover Page & User Input
Good day all. I could use some advice on creating a cover page for our BOM report. If you have read some of my previous posts, you may know that our database is a bit messed up. I can't change our report. I have created another report and formatted it the way our team has asked for. I can pull all of the information in ARAS into the report. The problem I have is the information that is not in ARAS (or not part of the Parts List). This is what I am trying to accomplish. 1. When the report is ran, a pop-up window will appear to ask for the information that is not part of the Parts List. A. The number of pages in the BOM (user can just add the number, last page of the report) B. Who the Drafter is (without associating a form directly to an ItemType, I don't know how to have the user pick from the User ItemType) C. A Notes section. I tried following 8.1 User Input for Reporting Services-based Reports from the XSLT Report Tool Users Guide (dated 4 Jan 2018). When I run the report a pop-up window appears and I can type in the information I want, but not select the User. When I click on Submit the window disappears & nothing else happens. I'm not sure what I am missing with this. Thanks for any help that can be provided. ARAS v11 SP10How to increase size of Form editor preview box? Designing large Forms in a 4inch box is a painful experience!
Hi community, does anyone of you know a way to increase the size of the Form WYSIWYG editor? Or even better: How to change the preview size dynamically? By default the preview box is very small and it´s not possible to change the size at all. This is ok for very small Forms, but we are living in the age of ultra high resolution widescreen monitors. So most of the time it´s a big design plus, when UI uses the available space most efficient. But right now we have to design potential full screen Forms literally in box of 10cm / 4inch height. Only alternative is using full custom external html, which I want to avoid for standard tasks. So I would be happy about any tip or idea to improve the way to design Forms! Thanks and best regards! AngelaGUI - Skinning v12 with Custom Look/Label/Icon
Steps to skin PLM These instructions assume you're in the root directory of installed v12 Innovator (so the paths are relative to that). It has been necessary to clear my browser cache and restart the server to get these changes to show. I recommend free tools Gimp and Inkscape for creating layered favicon.ico and .svg(s), respectively.. Change Browser Tab Identifier Text/Title Edit ./InnovatorConfig.xml Change UI-Tailoring: <UI-Tailoring product_name="B+L PLM - Authenticated Session Tab Title"/> Edit ./OAuthServer/OAuthServer.config. Change the following values: <add key="ProductName" value="B+L PLM - Login Page Title"></add> <add key="LocalAuthenticationDisplayName" value="B+L PLM"></add> Change Login Graphics Edit ./OAuthServer/OAuthServer.config. Change the following values: <add key="LogoUrl" value="~/images/BL_Login.svg"></add> <add key="BackgroundImageUrl" value="~/images/BL_LoginBackground.jpg"></add> Put B+L login page images (LogoUrl and BackgroundImageUrl files) in .\OAuthServer\wwwroot\images Change Browser Tab Icon (also used in browser bookmarks and pins) Add a custom favicon so the tab, even when pinned, is discernible from the other Aras default logo instances (with the "A" icon). Login Icon: .\OAuthServer\wwwroot\images\favicon.ico Post-auth Icon: .\Client\images\favicon.ico Actually Change the LOOK! Replace the login CSS file with the revamped one:. Currently no easy way to link anther CSS for the login, so we overwrite the existing file. Ideally we would just use sed to tack-on our overrides) OAuthServer\wwwroot\css\login.min.css For the main interface look and feel we can add our own CSS in the styles directory. I’m going with BL_ + <simple server identifier> + .css: \Innovator\Client\styles\BL_dev02.css Now, we need to link the file in: \Innovator\Client\default.aspx Look for the last existing CSS link, and add after it. CSS uses inheritance, so the last one overrides any previous styles: <link rel="stylesheet" href="../styles/common.min.css"/> <link rel="stylesheet" href="../styles/main.min.css"/> <link rel="stylesheet" href="../javascript/include.aspx?classes=common.css"> <link rel="stylesheet" href="../styles/BL_dev02.css"/> <link rel="preload" href="../styles/fontsNotoJp.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/> <link rel="preload" href="../styles/fontsRobotoLt.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/> I suggest using Stylus (local CSS overlay) plugin from Chrome, along with Chrome Dev Tools (Elements tab) to identify and then overlay styles. A big one for me is this box not lining up with the pin bar in the current Aras. It drives me nuts. Here are the styles to make sensible alignment, as well as where to add a very blatant bit of identifier in the header bar: // Eyes sigh... .aras-header .aras-header__navigation-button { width: 2rem; } #headerCommandsBar .aras-toolbar__divider { text-align: center; } #headerCommandsBar .aras-toolbar__divider::before { content: "DEV \2161"; color: #fff; font-size: 24px; border: 1px solid; padding: 0 10px; border-radius: 50px; background: #000; } Sample result after following all steps v12 - Authenticated, custom everything from following the above steps. My D2 icon tells me I'm on my remote dev server, even when pinned and I cannot see the custom title.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!
