Enhancing the User Interface of Work-Effort Tabular View in Web Application

Proposal Summary 

This proposal outlines the Redesign the user interface (UI) of the work order view from a horizontal layout to a vertical tab layout. 

Requirement 

Growire would like to add a new user interface (UI) within the work order view section 

Enhance the user experience of the current work order view by redesigning the interface with vertical tabs, making it more organized 

The existing work order page view displays tabs such as comments, materials, attachments, and resource group in a layout. Redesign the user interface (UI) of the work order view from a horizontal layout to a vertical tab layout.  

Deliverables 

Redesign the user interface (UI) of the work order view, from horizontal layout to a vertical tab layout. 

Add a new tab for skill sets. 

All functionalities remain the same as on the existing website. 

Enhance the UI to be more user-friendly while maintaining the existing theme. 

Create a new layout and user-friendly vertical tab layout, replacing the current horizontal table view. 

Ensure the new layout functions seamlessly across different devices and screen sizes. 

 

 

 

 

 

 

Backend (NetSuite): 

Implementation Overview: 

 

Requirement 1: 

Update the Material page both in workorder and work requirement the inventory item listing needs to be changed now it needs to list the datas from GRW007 Product Item ST Inventory Item 

Solutions:  

Listing 

Create a Saved Search for GRW007 Product Item ST Inventory Item: 

In the custom record GRW007 Product Item ST Inventory Item needs to create new fields the creation fields include  

Vendor/Name, 

Material Definition 

Manufacturer, 

Manufacturer Number 

Item name: material description* 

Supplier part number (Manufacturer Number) 

1 option of the following 2 options required: 

a. can upload link 

b. can add a quote 

if it is a spare part, provide RDSPP code* 

minimum stock required* 

unit of measure* 

HSE Check* (always visible) 

HSE approval list /record field with 3 status list pending approval,approved,rejected  

Rate will be fetched from the custom record GRW007 Est Product Item Cost Component 

 

 

Note: Items will be listed based on the workspace of the logged-in user. If there are no items for that user’s workspace, items with the workspace set to ‘system’ will be displayed instead. 

Adding product item to Work Order/Requirement Creation 

On selecting an item and adding quantity we will be using the same GRW007 Work Effort Inventory Assignment custom record for work order and GRW007 Requirement Inventory Assignment for Requirement 

A New field will be created for setting the items from the GRW007 Product Item ST Inventory item  

Creating GRW007 Product Item Super Type Type through Webapp  

Add a button labeled “Create Inventory.”  

Form Page: 

On clicking the button, a new form page opens. 

The form includes fields for: 

Vendor/Name, 

Material Definition 

Manufacturer, 

Supplier –list field from GRW007 Party Role Subtyped Vendor 

Item name: material description* 

Supplier part number (Manufacturer Number) 

1 option of the following 2 options required: 

a. can upload link 

b. can add a quote 

if it is a spare part, provide RDSPP code* 

Minimum stock required* 

Unit of measure* 

Price Per Unit of Measure (Dynamic): The label of this field changes dynamically based on the value selected in the Unit of Measure field. For example, if the Unit of Measure selected is litres, the label will change to “Price Per Litre.” 

HSE Check* (always visible) 

 

 

 

Supplier: can create proposed supplier if supplier does not exist* with the following fields 

Supplier name* 

VAT number supplier* 

Address* 

Phone number* 

E-mail address* 

Website address* 

Currency* 

Subsidiary* 

Workspace* 

 

If the vendor is not present, we will provide a new button to create a new vendor record. This button will open a form where fields for vendor address, phone number, email address, and web address will be present. When the user enters these field values and clicks on save, the following custom records will be created: 

GRW007 Party SuperType: In this custom record, the party subtype will be set to “Legal Organization.” 

GRW007 Party Role SuperType: In this custom record, the Role Type SubType will be set to “Party Role Type,” and the Role Type will be set to “Customer.” 

GRW007 Party Workspace Association 

GRW007 Party Subtyped Legal Organization 

GRW007 Party Role Subtyped Vendor 

GRW007 Party Vendor Mapping: This custom record will be created in NetSuite, but the standard subsidiary and vendor fields will be left empty. The user will need to manually add these fields once the standard vendor is created. If not, another record may be created when the map/reduce script is run. 

 GRW007 Item Approval Status 

Create a new custom record named GRW007 Item Approval Status with the following fields: 

Approval Status: Use the existing custom record for approval status types. 

Product ST Inventory Item: List/record 

Workspace 

2. Email Notification Setup 

Upon saving a GRW007 Product Item ST Inventory Item, an email should be sent to purchasing@otary.be (changeable) This email will contain two links: one to approve and the other to reject the item. 

Email Template: 

Email template that includes placeholders for the approval and rejection links. 

The email content can be edited by the user. 

Script Parameter: 

A script parameter to define the email ID purchasing@otary.be. 

Another script parameter for the email ID to notify after approval 

3. Approval Workflow 

Approval Handling: 

If approved, send an email to the second email ID (specified as a script parameter) using an email template. 

Prompt the user to create a standard NetSuite item manually. 

4. NetSuite Item Creation 

User Action: The user manually creates a standard NetSuite item. 

Mapping: The user then updates the GRW023 NetSuite Item Mapping record by adding the NetSuite item ID and Subsidiary. 

5. Update GRW007 Item Approval Status 

Post Item Mapping: After the user updates the GRW023 NetSuite Item Mapping, an entry in the GRW007 Item Approval Status custom record will be created with the status set to “Approved”. 

6. Custom Records Involved for Item Creation: 

GRW023 NetSuite Item Mapping: This record will store the mapping between the new NetSuite item and its subsidiary. 

GRW007 Product Item SuperType 

GRW007 Product Item ST Inventory Item 

GRW007 Product Item WS Association 

GRW007 Est Product Item Cost Component 

GRW007 Est Materials Cost Component 

 

Note : 

The PDF upload is limited to 2 when creating inventory from the web app. For file attachments, we are using the standard attachment feature in the custom record.  

Users will only be able to create a sales order after the standard NetSuite item mapping is completed for the listed items. 

 

 

 

 

Web App:  

 

Requirement 1: Redesign the user interface (UI) of the work order view from a horizontal layout to a vertical tab layout. Currently, all tabs (attachments, comments, resource group, materials) are displayed horizontally. 

Implementation Overview: 

In the new UI Updates, we will display only two main tabs: Details, Materials, Attachments. 

Main Tab 1. (Details): 

Sub-tabs (Materials): 

Materials: Display all Materials Details related to the work order. 

Functionality will remain the same as the existing system, with dropdowns for  

detailed views. 

Resource Groups: Display all resource groups involved in the work order. 

Functionality will remain the same as the existing system, with dropdowns for  

detailed views. 

New Tab (Skills): 

        A separate tab to display all the skills required for completing the work order. 

       This tab will list the skills needed and any proficiency levels or certifications 

 Required. 

Main Tab 2. (Attachments) 

Attachments: List all attachments associated with the work order. 

Functionality will remain the same as the existing system, with dropdowns for 

 detailed views. 

Main Tab 3. (Comments) 

Comments: Show all Comments Details needed for the work order. 

Functionality will remain the same as the existing system, with dropdowns for  

detailed views. 

Additionally updating 2 more fields to the material Lis 

Price per Piece 

Quantity 

Redesign UI: 

Layout: Transform the current horizontal arrangement of the tables (comments, materials, attachments, resource groups) into a vertical tab layout. 

Responsive Design: Ensure the new design is responsive and user-friendly across different devices and screen sizes. 

User-Friendly Interface: Maintain a clean and intuitive interface that enhances user navigation and interaction. 

 

Requirement 2: 

Enhance the Existing create inventory popup with new fields and add a NewPage feature for adding new vendors and suppliers, which includes mandatory fields and options for additional information. The user interface will be designed to enhance usability and ensure that all required data is collected efficiently. 

Implementation Overview: 

     User Interface (UI) Design 

Create inventory Fields: 

Vendor/Name: Text input 

Material Definition: Text input 

Manufacturer: Text input 

Price per piece: Number input 

Item name: material description*: Text input 

Supplier part number (Manufacturer Number): Text input 

Upload or Quote: 

Option a: Upload link (URL input) 

Option b: Add a quote (Text area) 

Spare Part: Checkbox (if checked, show RDSPP code input) 

RDSPP code*: Text input (conditional, shown if Spare Part is checked) 

Minimum stock required*: Number input 

Unit of measure*: Dropdown 

HSE Check*: Checkbox 

Price Per Unit of Measure (Dynamic): The label of this field changes dynamically based on the value selected in the Unit of Measure field. For example, if the Unit of Measure selected is Liter, the label will change to “Price Per Liter.” 

We will implement a PDF uploading option within the popup where users can add PDFs. The maximum number of PDF selections is restricted to 3. We will maintain an upload feature with a matching UI 

        Supplier Creation: 

If the supplier does not exist, a button labeled “Add New Supplier”. 

When “Add Supplier” is clicked, a popup or modal window should appear with the supplier creation form. 

Include all the necessary fields for supplier details, marked as mandatory where applicable. 

Provide a “Submit” button to save the new supplier and return to the main form. 

Ensure the popup/modal has a clear close button to return to the main form without adding a new supplier. 

 

Add New Supplier Section Fields: 

Supplier name*: Text input 

VAT number supplier*: Text input 

Address*: Text input 

Phone number*: Text input 

E-mail address*: Email input 

Website address*: URL input 

Currency*: Dropdown 

Subsidiary*: Dropdown 

Workspace*: Dropdown 

           Buttons: 

Submit: Creates the new supplier and returns to the main form. 

Cancel: Returns to the main form without saving. 

 

 

UI Updates: 

Update the existing inventory to include dropdown fields, input section, buttons Ensure all fields are styled consistently. 

Apply a consistent theme to all form fields, including colors, fonts, and spacing. 

Ensure labels and input fields are aligned and styled uniformly. 

Create a new layout for adding new suppliers. The new page should have a navbar that guides users with links, and updates should follow the existing theme format 

Ensure the page is responsive and compatible with all devices, including desktops, tablets 

 

Assumptions 

Requirement 1: 

When the screen size reduces, the horizontal tabs on the work effort detail and edit pages may break in the horizontal view. 

To ensure better performance and user experience, we have restricted the number of PDF uploads to a maximum of 3. Uploading more than 3 PDFs at once may delay the process. 

 

Leave a comment

Your email address will not be published. Required fields are marked *