Runtime UI Components for Context-Specific Low-Code Web Pages
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Developing web pages requires familiarity with programming languages like HTML and JAVASCRIPT, which can be time-consuming and results in inconsistent user experiences across different web pages, especially when developed by different programmers.
Innovation Solution
A runtime UI component that reserves an empty portion of the web page to be populated by context-specific UI components generated at runtime, using a runtime UI component editor to configure metadata for dynamic behavior, allowing reuse across pages with or without metadata changes.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If web pages are developed from scratch for each new use case using HTML and JavaScript, then each web page can be customized to meet specific requirements, but the development process takes a significant amount of time
Solution Approach 1:
The patent applies preliminary action by pre-defining UI component templates with standard structures, styles, and behaviors before actual web page development. These templates include pre-configured HTML, CSS, and JavaScript code that can be reused across multiple web pages, eliminating the need to develop everything from scratch and significantly reducing development time while maintaining customization capability through template selection and configuration
Solution Approach 2:
The patent implements copying by creating reusable UI component templates that can be replicated across different web pages. Instead of writing unique code for each page, developers can copy existing templates and modify them to suit specific requirements, thereby reducing redundant development work and accelerating the creation of new web pages while preserving adaptability
2Adaptability or versatility
If web pages are developed by different programmers using their own approaches, then each programmer can implement their unique design ideas, but the resulting web pages lack consistency in visual appearance and behavior
Solution Approach 1:
The patent applies universality by creating a shared library of UI component templates that can be used across multiple web pages and projects. These templates provide standardized structures, styles, and behaviors that ensure consistency while allowing customization through configuration parameters. Different programmers can all draw from the same template library, ensuring uniformity in user experience across the entire web application ecosystem
Solution Approach 2:
The patent implements parameter changes by allowing UI component templates to be customized through configurable parameters rather than requiring changes to the underlying code structure. Programmers can modify visual appearance, behavior, and content by adjusting template parameters such as colors, fonts, layout properties, and data bindings, thereby maintaining design flexibility while preserving the consistent foundational structure across all web pages
Data Source
AI summary
A system includes persistent storage containing predefined user interface (UI) component templates and a representation of a web page that includes a runtime UI component configured to reserve an empty portion of the web page to be populated by UI components generated at runtime. The system also includes a processor configured to perform operations, including receiving, from a client device, a request for the web page, and determining, based on the request, that the web page includes the runtime UI component. The operations also include determining runtime parameter values associated with the request, and determining, based on the runtime parameter values and the predefined UI component templates, context-specific UI components to populate the empty portion of the web page. The operations further include generating a context-specific representation of the web page based on the context-specific UI components, and transmitting, to the client device, the context-specific representation.