Proposal Summary
This proposal outlines the design solution for implementing new features and enhancements to meet the 1.2 requirements and functionalities within a web application.
Requirement
Growire would like to add a feature to implementing new features and enhancements to meet the 1.2 requirements and functionalities within a web application.
Requirement
This feature will enhance the web app with new features, functionalities, and user interface updates as part of the 1.2. The enhancements include multilanguage support, workspace improvements, and updates to existing pages.
Deliverables
- Implement a feature to automatically retrieve column labels from the backend.
- Dynamically updates based on data retrieved from the backend, ensuring accuracy and flexibility.
- Configuration of the error message on the web app
- Enable users to select their workspace directly from the homepage of the website.
- Choosing a workspace, the website will filter and display only relevant requirements and efforts associated with that workspace throughout the user’s session.
- Implement a language toggle option on the website for users to switch between Dutch and English languages.
- Enhancing the new data integration requirements with the existing pages in the web application
Backend (NetSuite):
Implementation Overview:
Requirement 1:
Update the web application to dynamically fetch column labels from the NetSuite API instead of using fixed labels in the app. Additionally configuration options for error messages within the application
Solutions:
Dynamically fetch column labels
Custom Record for Work Effort and Work Requirement:
- Create a single custom record in Netsuite that will store data related to work effort and work requirements.
- Add free-form text fields to capture relevant information.
Home Page Icon Setup:
- In the custom record, add two custom fields for the home page icon inputs (e.g., Icon Field 1, Icon Field 2).
- Display the values entered by users on the web app’s home page.
Inner Page Subtab:
- Add a new subtab within the custom record for the Inner Page (e.g., Work Order Details).
- Include header fields like Work Order Number, Planned Date, Scheduled Date, Status, Assignee, View, Edit (customize field names as needed).
Sidebar Tooltip:
- Create another subtab within the custom record for the Sidebar Tooltip (e.g., Tooltip Info).
- Add six fields related to the sidebar tooltip information (e.g., Tooltip Field 1, Tooltip Field 2, etc.)
Sidebar Page Subtab:
- Add 4 fields in NetSuite custom record under new subtab for side bar
- Include four fields that will be displayed in the sidebar of your web app based on user input (e.g., Sidebar Field 1, Sidebar Field 2, etc.).
Requirement 2:
Users should be able to choose their workspace from the homepage. Once a workspace is chosen, only the relevant requirements and efforts need to be displayed on the website. The workspace field should support multiselecting.
Solutions:
- Users now have multiple workspaces.
- The new custom record “user workspace association” will manage these associations.
- The “workspace” field in the custom record “GRW007” will no longer be used.
- The API will be modified to fetch the corresponding workspace from the “user workspace association.”
- If there’s no corresponding value found, the workspace won’t be displayed in the web app.
Requirement 3:
The website should offer a multilanguage option for users to choose from. Dutch and English languages.
Solutions:
- A new field for language will be added to the custom record for user preferences.
- When a user logs in, if Dutch is selected as the language, the web app details will be listed in Dutch based on that selection. (currently under analysis if feasible then we will be doing that)
Web App:
Implementation Overview:
Requirement 1:
Update the web application to dynamically fetch column labels from the NetSuite API instead of using fixed labels in the app. Additionally configuration options for error messages within the application
Solutions:
Dynamically fetch column labels
- Updating the web app to dynamically fetch column labels from the NetSuite API instead of using fixed labels within the app. This includes Work Orders, Attachments, Comments, Materials, Resource Bookings, and Time Entries.
- Create a system in the web app to match the fetched labels with the correct table columns.
- When a user makes changes in Netsuite Custome Record, they will be reflected in the web app.
- Note: Dynamic changes only updated with (Work Orders, Attachments, Comments, Materials, Resource Bookings, and Time Entries, sidebar, tooltip) Inner pages are not included with this proposal
- Suggestion: Implementing dynamic updates with a purchased server is a standard and efficient approach in web apps. However, using front-end APIs may cause delays
Error message on the website
- configuring an error message on the web app based on the responses from the API
- implementing a toasted error notification /error note on the website
- UI: Use the current theme within the UI for displaying error messages. All alignment and padding configurations will be updated accordingly
Requirement 2:
Users should be able to choose their workspace from the homepage. Once a workspace is chosen, only the relevant requirements and efforts need to be displayed on the website. The workspace field should support multiselecting.
Solutions:
- Implementing a new drop-down menu on the homepage header navigation bar, labeled “Workspace.”
- Populate the drop-down list with all available workspaces for the logged-in customer.
- Utilize the existing UI framework to maintain design consistency across the platform.
- Upon workspace selection, save the corresponding workspace ID to local storage.
- Pass the workspace ID to the NetSuite backend to retrieve workspace-specific data (filtered work order).
- Display filtered data in the web application, showing work orders based on the selected workspace ID.
- Ensure that all pages related to work order creation, deletion, material page creation, and time entry creation are filtered and created based on the selected workspace ID.
Header Navigation Bar Update:
- Add a new drop-down menu to the top navigation bar.
- Name the drop-down “Workspace” to show its purpose.
Dynamic Workspace List:
- Populate the drop-down list with all available workspaces for the logged-in customer.
- Utilize the existing UI framework to maintain design consistency across the platform.
Workspace Selection:
- Upon workspace selection, save the corresponding workspace ID to local storage.
- Pass the workspace ID to the NetSuite backend to retrieve workspace-specific data (filtered work order).
Data Filtering and Display:
- Display filtered data in the web application, showing work orders based on the selected workspace ID.
- Update the web app to show work orders based on the chosen workspace.
Workspace-Specific Functions:
- Adjust all work order-related pages to rely on the workspace ID.
- Ensure that all pages related to work order creation, deletion, material page creation, and time entry creation are filtered and created based on the selected workspace ID.
Requirement 3:
The website should offer a multilanguage option for users to choose from. Dutch and English languages.
Solutions:
Multilanguage Toggle Option:
- Implement a toggle button on the login page allowing users to switch between Dutch and English languages.
- UI updating for the Multilanguage switch
- Ensure the toggle design is user-friendly and enabling easy language selection.
Integration with Google Translate Libraries:
- Utilize Google Translate libraries to facilitate language switching between English and Dutch seamlessly.
- Ensure all website elements, including error messages and labels, are translatable using this library.
- Enable the selected language to persist throughout the user’s session.
- If a user selects a language during login, ensure the website remains in that language until the user logs out or explicitly changes the language.
- Ensure all website content, including homepage and subsequent pages, reflects the chosen language consistently.
- Implement language switching functionality across all relevant website components.
Requirement 4:
Updates In web app
1. Toggle Button for Asset Name Category:
- Customize the work order, create and edit pages to incorporate a toggle button for cases where the asset name category is not applicable, allowing flexibility in data entry.
- Add a toggle switch or checkbox on the asset name section of the work order form to indicate whether the asset name category is relevant or not.
- Implement logic to handle cases where the asset name field can be left empty if not mandatory.
- Update backend validation to accept empty asset names when the category is marked as not applicable.
3. Bi-directional Comment Copy:
- Develop functionality to copy comments from work effort to requirement pages and vice versa.
- Implement user interface controls (e.g., buttons or links) to initiate the comment copying process.
- Ensure data synchronization and consistency between comment sections across different pages.
4. Bi-directional Attachment Copy Functionality:
- Design and integrate copy functionality within the attachment section of both the work requirement and work effort pages.
- Develop a feature to duplicate attachments when copying work requirements.
- Design and integrate copy functionality within the attachment section of both the work requirement and work effort pages.
- Allow users to select specific attachments or groups of attachments to copy between work requirement and work effort