Button not adhering to CSS
Hello, I've got a button with very simple CSS (below). Problem is, the button isn't adhering to the code: {$this field rule} input; input[type="button"]{ height: 50px; width: 50px; } input[type="button"]:disabled{ background: #dddddd; } On both the form editor and the form in use, it's not following the dimensions Form Editor - not square On Form when viewing ItemType The button activates a method which is working as expected, so my only issue is the size of the button isn't doing what I want. As an alternate, I tried using an HTML field with my code to run a script, but the script doesn't seem to work on "onclick" for the HTML field; though the HTML formatting shows up as expected. Code below: <html> <body> <input type='button' onClick="function(VHVL)" style="height:40px; width:40px; background-color: RGBA(255, 255, 0); border: 1px solid RGBA(128, 128, 128, 0.5); padding: 0.25em;"> <script> function (VHVL) { // Create an Innovator object var myInnov = new Innovator(); var riskprobability = "1"; var riskimpact = "1"; var probabilityDropdown = getFieldComponentByName('_riskprobability'); probabilityDropdown.component.setState({value: riskprobability}); window.handleItemChange("_riskprobability", riskprobability); var impactDropdown = getFieldComponentByName('_riskimpact'); impactDropdown.component.setState({value: riskimpact}); window.handleItemChange("_riskimpact", riskimpact); var SeverityScore = riskprobability * riskimpact window.handleItemChange("_riskseverityscore", SeverityScore) if (riskimpact >= 4 && riskprobability <= 2) { window.handleItemChange("_riskhilp", "1"); } else { window.handleItemChange("_riskhilp", "0"); } if (SeverityScore > 4) { window.handleItemChange("_riskromap", "1"); } else { window.handleItemChange("_riskromap", "0"); } } </script> </body> </html> I don't really care whether I do this as a button or as an HTML field, but I do need the "item" to look right and execute the code. Appreciate any help on this!
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
Report - Method - Stylesheet Question
Aras 11 SP10 Good day all. I am trying to create a report that will pull all of the attached items from a document. I have a method that will get the information, but I can't get it to output correctly for the report (can't figure out the correct Stylesheet format). At the moment the method is referencing a single document by the ID number, but I will change this to cover a lot of the documents. I need a single line per related item, with the following fields (I will need to add more fields when this is working). Document ID Document Name Related ID Related Name When I run the report all of the related_id information is crammed into the Related ID cell. The Document ID cells will include the related_id number & the id number of the Relationship tab. Any help would be appreciated. Thank you. Stylesheet <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:aras="http://www.aras-corp.com"> <xsl:output method="html" omit-xml-declaration="yes" standalone="yes" indent="yes" cdata-section-elements="script msxsl:script"></xsl:output> <xsl:template match="/"> <html> <head></head> <style type="text/css" userData="Global"> .cellSolidRightBottom { border-right:1px #000000 solid; border-bottom:1px #000000 solid; } .cellSolidRight { border-right:1px #000000 solid; } .cellHeader { background-color:#CCCCCC; border-top:1px #000000 solid; border-right:1px #000000 solid; border-bottom:1px #000000 solid; padding:2px; text-align:center; text-transform:capitalize; text-align:center; font-family:helvetica; font-weight:bold; font-size:8pt; } </style> <body topmargin="50" leftmargin="50"> <table border="0" cellspacing="0" cellpadding="0" width="670"> <tr> <td width="260"></td> <td width="130"></td> <td width="130"></td> <td width="260"></td> <td width="130"></td> <td width="130"></td> <tr valign="top"> <td align="left" uniqueID="ms_id77" colspan="6"> </td> </tr> </tr> <tr valign="bottom"> <td colspan="6" style="font-family:helvetica;font-size:15pt;color:#DA1943;padding:2px;" align="left" uniqueID="ms_id79">Parts List BOM Info</td> </tr> <tr valign="bottom"> <td colspan="6" style="font-family:helvetica;font-size:10pt;padding:2px;" align="left" uniqueID="ms_id80"> Generated on: <base id="ms_id81"/> <script>var d = new Date(); var months = ["January","February","March","April","May","June","July","August","September","October","November","December"]; document.getElementById("ms_id81").innerHTML = d.getDate()+" "+months[d.getMonth()]+" "+d.getFullYear(); </script> </td> </tr> <tr> <td class="cellHeader" uniqueID="ms_id100" style="border-left:1px #000000 solid;">Parts List ID</td> <td class="cellHeader" uniqueID="ms_id101">Parts List Number</td> <td class="cellHeader" uniqueID="ms_id102">Parts List Name</td> <td class="cellHeader" uniqueID="ms_id103">Related ID</td> <td class="cellHeader" uniqueID="ms_id104">Related Number</td> <td class="cellHeader" uniqueID="ms_id105">Related Name</td> </tr> <xsl:apply-templates mode="ORPH" select="//Item"> </xsl:apply-templates> </table> </body> <script src="../../javascript/PopupMenu.js"></script> <script src="../../javascript/PopupMenu.js"></script> </html> </xsl:template> <xsl:template mode="ORPH" match="//Item"> <tr> <td class="cellSolidRightBottom" uniqueID="ms_id92" align="left" style="border-left:1px #000000 solid;"> <xsl:value-of select="id"></xsl:value-of> </td> <td class="cellSolidRightBottom" uniqueID="ms_id92" align="left" style="border-left:1px #000000 solid;"> <xsl:value-of select="item_number"></xsl:value-of> </td> <td class="cellSolidRightBottom" uniqueID="ms_id92" align="left" style="border-left:1px #000000 solid; word-wrap:break-word"> <xsl:value-of select="name"></xsl:value-of> </td> <td class="cellSolidRightBottom" uniqueID="ms_id92" align="left" style="border-left:1px #000000 solid;"> <xsl:value-of select="//related_id/Item[@id]"></xsl:value-of> </td> <td class="cellSolidRightBottom" uniqueID="ms_id92" align="left" style="border-left:1px #000000 solid;"> <xsl:value-of select="//related_id/Item[@item_number]"></xsl:value-of> </td> <td class="cellSolidRightBottom" uniqueID="ms_id92" align="left" style="border-left:1px #000000 solid;"> <xsl:value-of select="//related_id/Item[@id]"></xsl:value-of> </td> </tr> </xsl:template> </xsl:stylesheet>
Where are CSS minified?
I just got off the horn with support for an hour because I thought it important that they know some: 1. CSS classes are injected at view use of form on the creation/edit/view of an ItemType. 2. Inline styles are injected with a default (for at least dropdowns) width of 89px; In the end you can spend all day perfecting the layout of a form in the WYSIWYG-ish editor for Forms and then you go to create the related ItemType only to see all your efforts crash and burn because of the injected CSS classes and inline styles. The call went fine, but in the end it was a case of: You found a workaround so have a nice day and feel free to file specific CSS changes as a change request with Aras. Okay, well, I can go and add these to the main.css or the default.css and they'll never show. This, of course, is because the minified css is what is being loaded - even if you've updated web.config to an new number (and you can see that number in the salt=NEW_NUMBER of the URL - learned that today!). But, guess what? There is no re-minification. I've been digging through the rollup used in the Client, but I am not finding where the minified command happens? The package.json doesn't specifically have any package I've used for this. So... other than editing minified files (I use sed to slap on overrides at the end of whatever.css as a work-around, and I don't like needing to do that because I'm just overriding other styles defined earlier in said CSS...). My ask is: Where are CSS minified? Also, if this isn't something kicked off by version change in web.config, well, why not!?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!GUI - 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.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.
