Display control device, display control method, and display control program

Abstract

To allow data to be displayed in a state where no scroll operation is needed.SOLUTION: An acquisition unit acquires pieces of itemization data to be displayed, and a binding control unit displays each of the acquired pieces of itemization data on an itemization input control. At this time, an adjustment unit adjusts the size of the itemization input control to the size corresponding to the number of the acquired pieces of itemization data. As an example, the adjustment unit adjusts height, which is the width in a column direction of the itemization input control, to the height corresponding to the number of the acquired pieces of itemization data. As a result, this allows the acquired pieces of itemization data to be viewed in a list on the itemization input control, without requiring scroll operation.SELECTED DRAWING: Figure 14

Description

Technical Field

[0001] The present invention relates to a display control device, a display control method, and a display control program.

Background Art

[0002] Today, for example, in the case of business operators inputting details such as customer names, sold product names, and sales amounts described in invoices received by mail, facsimile devices, or electronic data into a detail input screen displayed on a personal computer device. There are, for example, dozens of details described in the invoice, and the business operator performs an input operation while checking that there are no mistakes in the input content. Therefore, it is preferable that the detail lines (records) into which details are input can display as many detail lines as possible with few scroll operations.

[0003] As a prior art regarding such display adjustment of detail lines, Patent Document 1 (Japanese Unexamined Patent Application Publication No. 2022-073514) discloses an image data output device. This image data output device has a layout input unit that arbitrarily adjusts the size and position of a plurality of print data included in the image data according to a user's input operation. The layout change unit performs size adjustment and alignment on the plurality of print data adjusted by the layout input unit so that the plurality of print data is arranged within a predetermined area. Then, the output unit outputs the plurality of print data that has been size-adjusted and aligned by the layout change unit as image data to a handheld printer. As a result, it is possible to easily create image data for a handheld printer.

Prior Art Documents

Patent Documents

[0004]

Patent Document 1

Summary of the Invention

Problems to be Solved by the Invention

[0005] However, there is a need for the development of a display control device that can display data without requiring scrolling.

[0006] This invention has been made in view of the above-mentioned problems, and aims to provide a display control device, a display control method, and a display control program that enable the display of data without the need for scrolling. [Means for solving the problem]

[0007] To solve the above-mentioned problems and achieve the objective, the display control device according to the present invention comprises: an acquisition unit that acquires detail data to be displayed; a binding control unit that displays the acquired detail data in strip-shaped input areas along the row direction on the detail input control; and an adjustment unit that adjusts the size of the detail input control to a size corresponding to the number of detail data to be displayed, wherein the adjustment unit In addition to the "Adjust to Number of Details" option, which adjusts the "height" of the detail input control according to the number of rows of detail data displayed in the detail input control, there is an option to adjust the "height," which is the width in the column direction of the detail input control, as a "fixed value" regardless of the size according to the number of detail data displayed, and an option to "Adjust to Outer Frame," which adjusts the detail input control to match the height of the panel or screen size regardless of the size according to the number of detail data displayed, and each selection item The size of the detail input control is adjusted to match the size of the selected item. The adjustment unit, when the minimum number of display details is set to adjust the height of the detail input control to the minimum height determined by a predetermined calculation, sets the adjustment margin to a predetermined fixed value which is the height of the data display area and the margin between data rows, sets the column header to the area other than the data rows and is the display area for the column item names displayed at the top of the detail input control, and sets the footer to the area other than the data rows and is the display area at the bottom of the detail input control. Minimum height = Column header height + Data row height + Adjustment margin + Footer height Column header height = Height of one column header row × Number of column header rows Data row height = (Height of one data row × Number of rows) × Minimum number of details to display Footer height = Height of one footer row × Number of footer rows The calculation is performed, and if the result is "current height < minimum height", the height of the detail input control is set to the minimum height. If the result is "current height ≥ minimum height", the height of the detail input control is set to the current height.

[0008] Furthermore, in order to solve the above-mentioned problems and achieve the objective, the display control method of the display control device according to the present invention comprises: an acquisition step in which an acquisition unit acquires detail data to be displayed; a binding control step in which a binding control unit displays the acquired detail data in strip-shaped input areas along the row direction on the detail input control; and an adjustment step in which an adjustment unit adjusts the size of the detail input control to a size corresponding to the number of detail data to be displayed, wherein in the adjustment step, In addition to the "Adjust to Number of Details" option, which adjusts the "height" of the detail input control according to the number of rows, which is the number of detail data items displayed by the detail input control, there is an option to adjust the "height," which is the width in the column direction and is the size of the detail input control, as a "fixed value," regardless of the size according to the number of detail data items to be displayed, and an option to "Adjust to Outer Frame," which adjusts the detail input control to match the height of the panel or screen size, regardless of the size according to the number of detail data items to be displayed, and each of the above selection items The size of the detail input control is adjusted to match the size of the selected item. In the adjustment step described above, when the minimum number of display details required to adjust the height of the detail input control to a minimum height determined by a predetermined calculation is set, the adjustment margin is set to a predetermined fixed value which is the height of the data display area and the margin between the data rows, the column header is set to the area other than the data rows and is the display area for the column item names to be displayed at the very top of the detail input control, and the footer is set to the area other than the data rows and is the display area at the very bottom of the detail input control. Minimum height = Column header height + Data row height + Adjustment margin + Footer height Column header height = Height of one column header row × Number of column header rows Data row height = (Height of one data row × Number of rows) × Minimum number of details to display Footer height = Height of one footer row × Number of footer rows The calculation is performed, and if the calculation result is "current height < minimum height", the height of the detail input control is set to the minimum height, and if the calculation result is "current height ≥ minimum height", the height of the detail input control is set to the current height.

[0009] Also, in order to solve the above-described problems and achieve the object, the display control program according to the present invention causes a computer to function as an acquisition unit that acquires detail data to be displayed, a binding control unit that displays the acquired detail data in strip-shaped input areas along the row direction on a detail input control, and an adjustment unit that adjusts the size of the detail input control to a size corresponding to the number of detail data to be displayed. The adjustment unit adjusts the size of the detail input control to a size corresponding to a selection item selected from In addition to the "Adjust to Number of Details" option, which adjusts the "height" of the detail input control according to the number of rows, which is the number of detail data items displayed by the detail input control, there is an option to adjust the "height," which is the width in the column direction and is the size of the detail input control, as a "fixed value," regardless of the size according to the number of detail data items to be displayed, and an option to "Adjust to Outer Frame," which adjusts the detail input control to match the height of the panel or screen size, regardless of the size according to the number of detail data items to be displayed, and each of the above selection items and adjusts the size of the detail input control to a size corresponding to the selection item selected from the above, The adjustment unit, when a minimum number of display details is set to adjust the height of the detail input control to a minimum height determined by a predetermined calculation, sets the adjustment margin to a predetermined fixed value which is the height of the data display area and the margin between data rows, sets the column header to an area other than the data rows and to be the display area for the column item names displayed at the top of the detail input control, and sets the footer to an area other than the data rows and to be the display area at the bottom of the detail input control. Minimum height = Column header height + Data row height + Adjustment margin + Footer height Column header height = Height of one column header row × Number of column header rows Data row height = (Height of one data row × Number of rows) × Minimum number of details to display Footer height = Height of one footer row × Number of footer rows The calculation is performed, and if the calculation result is "current height < minimum height", the height of the detail input control is set to the minimum height, and if the calculation result is "current height ≥ minimum height", the height of the detail input control is set to the current height.

Advantages of the Invention

[0012] The following describes embodiments to which the present invention is applied. It should be noted that these embodiments are merely examples of the present invention, and the present invention is not limited to these embodiments.

[0013] [Comparative Example] First, Figures 1 to 3 will be used to explain the display operation of the detail lines in the comparative example. As shown in Figure 1(a), a control that allows multiple lines of data of the same format to be entered is called a detail input control. This detail input control basically has its height specified during development. If the height is fixed, depending on the number of detail lines, scrolling may be necessary, as shown in Figure 1(b).

[0014] When scrolling occurs, it becomes difficult for the business operator to understand which document's details they are currently viewing. Also, as shown in Figure 2(a), adjusting the height of the detail input control to match the expected maximum number of details can reduce scrolling, but if only a small number of detail lines are entered, this results in wasted space, as shown in Figure 2(b).

[0015] Furthermore, as shown in Figures 3(a) and 3(b), it is conceivable to allow the business operator to specify the height of the detail lines. In this case, the business operator can check the input content of each detail line without scrolling the detail input control. However, in this case, the business operator has the problem of having to manually adjust the height of the detail lines (number of display lines) according to the number of detail lines to be entered, which is a cumbersome process.

[0016] The display control system of the embodiment described below automatically adjusts the height of the detail input control according to the number of details, thereby preventing the creation of unnecessary space in the layout and allowing the input content to be checked without scrolling.

[0017] [System Configuration] Figure 4 is a system configuration diagram of the display control system according to the embodiment. As shown in Figure 4, the display control system according to the embodiment includes a developer terminal device 30, a low-code development web server device 100, a development database 101, an application web server device 1 (an example of a display control device), a client terminal device 40, a business API (Application Programming Interface) 6, and a business database 7.

[0018] The developer terminal device 30 communicates with the low-code development web server device 100 via a predetermined network, such as the Internet, using a Web (World Wide Web) browser 31. The low-code development web server device 100 provides the developer terminal device 30 with low-code development tools. The developer uses the provided low-code development tools to operate the developer terminal device 30 and create definition data for the display control program. The definition data for the display control program created on the developer terminal device 30 is stored in the development database 101 via the low-code development web server device 100.

[0019] For the purposes of this explanation, we will assume that the display control program is developed using a low-code development tool. However, the display control program may also be developed using no-code development or full-scratch development. In the case of low-code development, the display control program can be developed relatively easily by combining screen components or logic components using visual operations based on a GUI (Graphical User Interface), and it allows for more detailed settings and control than no-code development.

[0020] The application web server device 1 obtains definition data for the display control program created by the developer terminal device 30 from the development database 101. The application web server device 1 also generates a display control program, which is a so-called web application program, based on the obtained definition data. Then, based on the generated display control program, the application web server device 1 obtains business data from the business database 7 via the business API 6, generates a detail input control screen, and provides it to the client terminal device 40. The application web server device 1 also supplies the detail input data generated via the detail input control screen to the business database 7 via the business API 6, thereby updating the business data.

[0021] The client terminal device 40 communicates with the application web server device 1 via a web browser 41 and a network such as the internet. The client terminal device 40 obtains the detail input control screen (execution screen) generated by the application web server device 1 based on the display control program. The detail input data entered by the business user via the detail input control screen is sent to the application web server device 1 via the web browser 41 and the network. The application web server device 1 updates the business data in the business database 7 with the new detail input data received from the client terminal device 40.

[0022] [Hardware configuration of the application web server device] Figure 5 is a block diagram showing the hardware configuration of the application web server device 1. This application web server device 1 comprises a storage unit 2, a control unit 3, and a communication interface unit 4. The communication interface unit 4 is connected to a developer terminal device 30 and a client terminal device 40, etc., via a network 55 such as a wide-area network like the Internet or a private network like a LAN (Local Area Network). The application web server device 1 generates a detail input control screen, as described later, based on a display control program that functions as a so-called web application program, via the developer terminal device 30, and transmits it to the client terminal device 40 for display.

[0023] For the memory unit 2, a storage device such as ROM (Read Only Memory), RAM (Random Access Memory), HDD (Hard Disk Drive), or SSD (Solid State Drive) can be used. The memory unit 2 stores the display control program developed via the developer terminal device 30, as well as the Web browser 13.

[0024] [Application Web Server Device Functional Configuration] The control unit 3 of the application web server device 1 functions as a communication control unit 21, acquisition unit 22, calculation unit 23, and screen generation unit 24 by executing the display control program stored in the storage unit 2.

[0025] The communication control unit 21 obtains an application definition from the development database 101 via the communication interface unit (an example of a communication unit). A display control application program is generated based on the obtained application definition. The communication control unit 21 transmits the detail input control screen generated by the display application program to the client terminal device 40 via the web browser 13.

[0026] The acquisition unit 22 acquires the detail data to be displayed from the development database 101. The calculation unit 23 is an example of an adjustment unit. The calculation unit 23 calculates the size of the detail input control corresponding to the number of detail data acquired. Specifically, the calculation unit 23 calculates the height, which is the width in the column direction of the detail input control, according to the number of detail data acquired. This allows the height of each detail input control to be adjusted according to the number of detail data acquired. As a result, the acquired detail data can be displayed in a list on the detail input control, eliminating the need for scrolling.

[0027] The screen generation unit 24 is an example of a binding control unit. The screen generation unit 24 displays the acquired detail data on the detail input controls. The screen generation unit 24 also generates HTML (Hypertext Markup Language) data corresponding to the screen state of the detail input control into which the detail data was entered. The communication control unit 21 transmits this HTML data corresponding to the screen state of the detail input control to the client terminal device 40 via the web browser 13, the communication interface unit 4, and the network 55. As a result, the detail input control screen generated by the application web server device 1 is displayed via the web browser 41 of the client terminal device 40.

[0028] Furthermore, the calculation unit 23 calculates and adjusts the height of the detail input control when the detail input control screen is launched, when detail data is bound by button operations on the detail input control screen, or when an order to add or delete detail rows is executed for the detail input control.

[0029] Furthermore, if a minimum number of detail items to display is set, the calculation unit 23 calculates the minimum height, which is the height of the detail input control corresponding to the minimum number of detail items to display, and compares it with the display height, which is the height corresponding to the number of detail items. Then, if the display height is less than the minimum height, the calculation unit 23 adjusts the height of the detail input control to the minimum height, and if the display height is equal to or greater than the minimum height, it adjusts the height of the detail input control to the display height.

[0030] Furthermore, if the maximum number of detail data items to display is set, the calculation unit 23 calculates the maximum height, which is the height of the detail input control corresponding to the maximum number of detail data items to display, and compares it with the display height, which is the height corresponding to the number of detail data items. Then, if the maximum height is less than the display height, the calculation unit 23 adjusts the height of the detail input control to the maximum height, and if the maximum height is equal to or greater than the display height, it adjusts the height of the detail input control to the display height.

[0031] [Definition structure of the display control program] Next, we will explain the definition structure of the display control program that enables height adjustment of such detail input controls. Figure 6 shows how a developer is developing a display control program using the developer terminal device 30. Figure 6(a) shows the detail input control setting screen displayed on the display unit of the developer terminal device 30, where the detail input controls are configured. The screen shown in the center of Figure 6(a) is the detail input control screen. The developer selects text, buttons, checkboxes, radio buttons, etc., and places them on the detail input control screen.

[0032] Furthermore, the object located near the center to the bottom of the detail input control settings screen shown in Figure 6(a) is the detail input control. Of this detail input control, the row displaying the header items for expense item, tax category, and amount at the top is the "Detail Input Header Panel". The row following this detail input header panel is the "Detail Input Data Panel", where the input fields for expense item, tax category, and amount are blank. Also, the row displaying the footer item for the total amount at the bottom of the detail input control is the "Detail Input Data Footer".

[0033] For such a detail input control, the developer sets the "identifier name," the "height" (which is the width in the column direction), the "minimum number of display rows" to be shown in the detail input control, and the "maximum number of display rows" to be shown in the detail input control. The example in Figure 6(a) is an example where "Detail Input 1" is set as the identifier name.

[0034] The "height," which is the width in the column direction, can be set by selecting from the following options: "Fixed value," "Fit to outer frame," and "Fit to number of details." The "Fixed value" option is selected when setting a predetermined height that is set by default. The "Fit to outer frame" option is selected when you want to automatically adjust the height of the detail input control to match the size of its parent (panel or screen).

[0035] Furthermore, in the display control system of this embodiment, a "match to the number of details" option is provided. By selecting this "match to the number of details" option, the "height" is adjusted according to the number of lines (number of detail data) in the detail input control, as will be described later. This makes it possible to check the input content without creating unnecessary space in the layout and without requiring scrolling.

[0036] The definition data for the display control program that enables the display of such detail input controls is stored in the development database 101, as shown in Figure 6(b). Figure 6(c) shows an example of a definition management table for the display control program definition data stored in the development database. As shown in Figure 6(c), the definition data for the display control program consists of a definition ID, definition name, control information, action information, logic flow information, and linking information. The "height," "minimum number of display rows," and "maximum number of display rows" of the detail input control, which are set along with the accounting date and billing date on the detail input control setting screen described above, are included in the definition data and stored as control information as shown in Figure 6(c).

[0037] Figure 7 shows the details of this control information. The control information consists of multiple control elements. In the example in Figure 7, control element 1 is the control element for the input field of "Accounting Date" with identification number (ID) "XX1". The "Required" setting field for this "Accounting Date" input field is set to "TRUE (=always display)", indicating whether or not it should always be displayed. Similarly, control element 2 is the control element for the input field of "Billing Address" with identification number (ID) "XX2". The "Required" setting field for this "Billing Address" input field is also set to "TRUE (=always display)", indicating whether or not it should always be displayed.

[0038] Control element 3, with identification number (ID) "XX3", is a control element for the entire detail input control. In this control element 3, the "height", "minimum number of display rows", "maximum number of display rows", and "child elements" of the detail input control are set. In the example in Figure 7, the "height" is set to "match the number of details", the "minimum number of display rows" is set to "5 rows", the "maximum number of display rows" is not set, and control elements 4 to 6, with IDs XX4 to XX6 as described below, are set as "child elements".

[0039] Control element 4, with ID XX4, is a child element of control element 3 and is a control element of the detail input header panel that includes header items for expense item, tax category, and amount. The "column information" of this control element 4 and control elements 5 and 6, which are described below, is information about the number of divisions in the horizontal line and the length at each division, as shown in Figure 8(a). In the example in Figure 7, as shown in Figure 8(b), the "column information" is set to "50, 50, 50", indicating that the row length of each input item for expense item, tax category, and amount is 50 pixels (px) each.

[0040] Furthermore, the "column information" of control element 4 and control elements 5 and 6, which are described below, is information about the number of divisions in the vertical line and the length of the divisions, as shown in Figure 8(a). In the example in Figure 7, as shown in Figure 8(b), the "row information" is set to "20", indicating that the "height", which is the width in the column direction of each input item for expense item, tax category, and amount, is set to a height of 20 pixels each.

[0041] Control element 5, with ID XX5, which is a child element of control element 3, is a control element of the detail input data panel, which consists of input fields for detail data such as expense item, tax category, and amount. In the example in Figure 7, the "column information" is set to "50, 50, 50", indicating that the row length of each input field corresponding to expense item, tax category, and amount is 50 pixels long. In addition, in the example in Figure 7, the "row information" is set to "20", indicating that the "height", which is the column width of each input field corresponding to expense item, tax category, and amount is 20 pixels long. Alternatively, as shown in Figure 8(c), "row information" such as "18" may be set to indicate that the "height", which is the column width of each input field corresponding to expense item, tax category, and amount is 18 pixels long.

[0042] Control element 6, with ID XX6, is a child element of control element 3 and is a control element of the detail input data footer that includes a field for displaying the total amount. In this detail input data footer, a blank field, a field for displaying the total amount text, and a field for displaying the total amount are displayed along the row. For this reason, in the example in Figure 7, the "column information" is set to "50, 50, 50", indicating that the row length of the blank field, the field for displaying the total amount text, and the field for displaying the total amount are each 50 pixels long. In addition, in the example in Figure 7, the "row information" is set to "20", indicating that the "height", which is the column width of the blank field, the field for displaying the total amount text, and the field for displaying the total amount are each 20 pixels high.

[0043] [Automatic height adjustment operation for detail input controls] Next, we will explain the automatic height adjustment operation of such detail input controls. The automatic height adjustment of detail input controls is performed, for example, when the detail input control screen is launched, when detail data is bound by operating buttons etc. on the detail input control screen, or when an order to add or delete detail rows is executed for the detail input control.

[0044] The calculation unit 23 calculates the current height of the detail input control by adding up the column header height, data row height, adjustment margin, and footer height shown in Figure 9. The "adjustment margin" is the height of the margin between the data display area and the data row, and is a predetermined fixed value, such as 18 pixels.

[0045] Current height = Column header height + Data row height + Adjustment margin + Footer height

[0046] Furthermore, as shown in Figure 10, in the case of multi-stage detail input control, the calculation unit 23 multiplies the "height of the column header," "height of the data row," and "height of the footer" by the number of rows.

[0047] Column header height = Height of one column header row × Number of column header rows Data row height = (Height of one data row × Number of rows per unit) × Current number of data rows Footer height = Height of one footer row × Number of footer rows

[0048] (Calculation of minimum and maximum number of display items) Furthermore, if the minimum and maximum number of display details are set, the calculation unit 23 calculates the height of the detail input control based on the following calculation formula and performs height adjustment control. Note that the minimum number of display details should not exceed the maximum number of display details when set.

[0049] (Height calculation when a minimum number of display items is set) Minimum height = Column header height + Data row height + Adjustment margin + Footer height Column header height = Height of one column header row × Number of column header rows Data row height = (Height of one data row × Number of rows) × Minimum number of details to display Footer height = Height of one footer row × Number of footer rows

[0050] If the calculation result is "current height < minimum height", the calculation unit 23 sets the height of the detail input control to the minimum height. If the calculation result is "current height ≥ minimum height", the calculation unit 23 sets the height of the detail input control to the current height.

[0051] (Height calculation when the maximum number of display items is set) Maximum height = Column header height + Data row height + Adjustment margin + Footer height Column header height = Height of one column header row × Number of column header rows Data row height = (Height of one data row × Number of rows) × Maximum number of details to display Footer height = Height of one footer row × Number of footer rows

[0052] The calculation unit 23 sets the height of the detail input control to the current height if the calculation result is "current height ≤ maximum height". The calculation unit 23 also sets the height of the detail input control to the maximum height if the calculation result is "current height > maximum height".

[0053] (Action when the detail input control is launched) Next, in the case of the display control system of the embodiment, as described above, the automatic adjustment of the height of the detail input control is performed when "the detail input control screen is launched", "when detail data is bound by operation of buttons etc. on the detail input control screen", or "when an order to add or delete a detail row is executed for the detail input control".

[0054] Figure 11 is a flowchart showing the operation flow when the application web server device 1 starts the display control program in response to a startup request from the client terminal device 40, including the automatic adjustment of the height of the detail input control and the transmission of the automatically adjusted detail input control to the client terminal device 40. When the control unit 3 of the application web server device 1 starts the display control program stored in the storage unit 2 in response to a startup request from the client terminal device 40, it starts processing from step S1 in the flowchart of Figure 11.

[0055] In step S1, the acquisition unit 22 acquires detail data to be displayed on the detail input control from the development database 101 via the communication interface unit 4 and the network 55. The screen generation unit 24 binds the acquired detail data to the detail input control that has been temporarily deployed on the storage unit 2.

[0056] Next, in step S2, the calculation unit 23 performs the above calculation based on the number of data items in the detail data bound to the detail input control, and calculates the "current height" of the detail input control. Then, the calculation unit 23 sets the calculated "current height" to the "display height".

[0057] In step S3, the calculation unit 23 determines, based on the control information explained using Figure 7(b), whether the minimum number of display details (= minimum number of display lines), such as "5 lines," is set. If the minimum number of display details is not set (step S3: False), the calculation unit 23 determines, in step S7, whether the maximum number of display details (= maximum number of display lines) is set, based on the control information explained using Figure 7(b).

[0058] If the maximum number of displayable details (=maximum number of displayable lines) is not set (step S7: False), the screen generation unit 24 converts the screen state of the detail input control screen temporarily deployed in the storage unit 2 in step S11 into HTML data. The communication control unit 21 transmits the detail input control screen, whose screen state has been converted into HTML data, to the client terminal device 40 via the web browser 13, the communication interface unit 4, and the network 55.

[0059] As a result, the detail input control screen with the detail data entered is displayed on the display unit of the client terminal device 40. Furthermore, since the height of the detail input control is adjusted according to the number of detail data items to be displayed, as described above, each detail data item can be displayed in a list on the detail input control, eliminating the need for scrolling.

[0060] In response to this, if it is determined in step S3 that the minimum number of display details has been set (step S3: True), the process proceeds to step S4. In step S4, the calculation unit 23 calculates the minimum height based on the above calculation formula and proceeds to step S5. In step S5, it is determined whether the display height is less than the minimum height. If the display height is less than the minimum height (step S5: True), the calculation unit 23 adjusts the height of the detail input control to the minimum height in step S6 (setting the minimum height to the display height). Also, if the display height is greater than or equal to the minimum height (step S5: False), the calculation unit 23 sets and adjusts the height of the detail input control to the display height.

[0061] On the other hand, if it is determined in step S7 that the maximum number of display details has been set (step S7: True), the process proceeds to step S8. In step S8, the calculation unit 23 calculates the maximum height based on the above calculation formula and proceeds to step S9. In step S9, the calculation unit 23 determines whether the maximum height is less than the display height. If the maximum height is less than the display height (step S9: True), the calculation unit 23 adjusts the height of the detail input control to the maximum height in step S10 (setting the maximum height to the display height). Also, if the maximum height is greater than or equal to the display height (step S9: False), the calculation unit 23 adjusts the height of the detail input control to the display height.

[0062] Once the height of each row in the detail input control has been adjusted in this manner, in step S11, the screen generation unit 24 converts the screen state of the detail input control screen, which has been temporarily displayed in the storage unit 2, into HTML data. The communication control unit 21 transmits the detail input control screen, whose screen state has been converted into HTML data, to the client terminal device 40 via the web browser 13, the communication interface unit 4, and the network 55.

[0063] (Actions when a button is pressed on the details input control screen) Next, Figure 12 is a flowchart showing the flow of operations in the client terminal device 40, specifically the automatic adjustment of the height of the detail input control when a button on the detail input control screen is operated, and the transmission of the detail input control with the automatically adjusted height to the client terminal device 40.

[0064] In this case, in step S21, the acquisition unit 22 acquires detail data to be displayed in the detail input control from the development database 101 via the communication interface unit 4 and the network 55. The screen generation unit 24 binds the acquired detail data to the detail input control of the detail input control screen, which is temporarily deployed on the storage unit 2.

[0065] Next, in step S22, the calculation unit 23 calculates the height of the detail input control when the screen is displayed, as described above, and calculates and adjusts the display height based on the setting information.

[0066] In step S23, the screen generation unit 24 converts the screen state of the detail input control screen, which has been temporarily deployed in the storage unit 2, into HTML data. The communication control unit 21 transmits the detail input control screen, whose screen state has been converted into HTML data, to the client terminal device 40 via the web browser 13, the communication interface unit 4, and the network 55.

[0067] (Action when adding or deleting detail lines in the detail input control) Next, Figure 13 is a flowchart showing the flow of operations in which the height of the detail input control is automatically adjusted when an add or delete operation is performed on the detail input control in the client terminal device 40, and the detail input control with the height automatically adjusted is sent to the client terminal device 40.

[0068] In this case, in step S31, the screen generation unit 24 adds or deletes the detail data of the rows added or deleted by the client terminal device 40 from the detail input control temporarily deployed on the storage unit 2 to the detail data on the detail input control.

[0069] Next, in step S32, the calculation unit 23 calculates the height of the detail input control when the screen is displayed, as described above, and calculates and adjusts the display height based on the setting information.

[0070] In step S33, the screen generation unit 24 converts the screen state of the detail input control screen, which has been temporarily deployed in the storage unit 2, into HTML data. The communication control unit 21 transmits the detail input control screen, whose screen state has been converted into HTML data, to the client terminal device 40 via the web browser 13, the communication interface unit 4, and the network 55.

[0071] [Example of displaying a height-adjusted detail input control] Next, Figures 14 to 17 show examples of the display of the detail input control with its height adjusted in this manner. The display control system of this embodiment allows for the adjustment of the height of the detail input control in real time in accordance with the screen startup, button operation, data binding, or the addition or deletion of detail data, by providing a setting for the height of the detail input control to "match to detail line".

[0072] Figures 14(a) to 14(d) show examples of the detail input control screen display when there is 1 detail data line, 3 detail data lines, 5 detail data lines, and 8 detail data lines, respectively. As shown in Figures 14(a) to 14(d), the height of the detail input control is adjusted according to the number of detail lines.

[0073] Figure 15(a) shows an example of the display of a detail input control in a multi-row style (a layout in which column headers, detail rows, and footers are composed of multiple rows). Figure 15(b) shows an example of the display of a detail input control when there is no detail input data footer. In this way, the display of the detail input control can be adapted to multi-row detail styles and the presence or absence of a footer.

[0074] Furthermore, Figure 16(a) shows an example of the display of the detail input control when no minimum number of display details is set, and Figure 16(b) shows an example of the display of the detail input control when a minimum number of display details is set. The minimum number of display details is set when there is sufficient height, or when the most frequently entered number of details is known.

[0075] Furthermore, Figure 17(a) shows an example of the display of the detail input control when no maximum number of detail items is set, and Figure 17(b) shows an example of the display of the detail input control when a maximum number of detail items is set. The maximum number of detail items is set when the number of detail data lines exceeds the screen area and the footer becomes invisible, or when the amount of data, such as data linked from external sources, far exceeds what is expected for manual input. Setting a maximum number of detail items prevents (suppresses) the inconvenience of the detail input control continuously expanding.

[0076] [Effects of the embodiment] As is clear from the above description, in the display control system of this embodiment, the acquisition unit of the application web server device 1 acquires the detail data to be displayed, and the screen generation unit 24 displays the acquired detail data on the detail input controls. The calculation unit 23 adjusts the size of the detail input controls to a size corresponding to the number of acquired detail data.

[0077] Specifically, the calculation unit 22 adjusts the height, which is the width in the column direction of the detail input control, to a height corresponding to the number of detail data points acquired. This allows the height of the detail input control to be automatically adjusted according to the number of detail data points. As a result, it is possible to confirm the input content without creating unnecessary space in the layout and without requiring scrolling.

[0078] Furthermore, the calculation unit 23 adjusts the height of the detail input control when the detail input control screen is launched, when detail data is bound by button operations on the detail input control screen, or when an add or delete command for a detail row is executed on the detail input control. This ensures that the detail input control screen with the appropriate height adjustment is displayed at the correct time.

[0079] Furthermore, if a minimum number of detail items to display is set, the calculation unit 23 calculates the minimum height, which is the height of the detail input control corresponding to the minimum number of detail items to display, and compares it with the display height, which is the height corresponding to the number of detail items. If the display height is less than the minimum height, the calculation unit 23 adjusts the height of the detail input control to the minimum height. If the display height is greater than or equal to the minimum height, the calculation unit 23 adjusts the height of the detail input control to the display height. In this way, the minimum height of the detail input control can be suppressed to a preset height.

[0080] Furthermore, if a maximum number of detail data items to display is set, the calculation unit 23 calculates the maximum height of the detail input control corresponding to the maximum number of detail data items to display, and compares it with the display height, which is the height corresponding to the number of detail data items. If the maximum height is less than the display height, the calculation unit 23 adjusts the height of the detail input control to the maximum height. If the maximum height is equal to or greater than the display height, the calculation unit 23 adjusts the height of the detail input control to the display height. This allows the minimum height of the detail input control to be suppressed to a preset height.

[0081] [Contribution to the United Nations-led Sustainable Development Goals (SDGs)] This embodiment can contribute to improving operational efficiency and promoting appropriate management decisions by companies, thereby contributing to SDG Goals 8 and 9.

[0082] Furthermore, this embodiment can contribute to reducing waste and promoting paperless and digital processes, thereby contributing to SDGs Goals 12, 13, and 15.

[0083] Furthermore, this embodiment can contribute to strengthening control and governance, thereby enabling contributions to SDG Goal 16.

[0084] [Other embodiments] In addition to the embodiments described above, the present invention may be implemented in various different embodiments within the scope of the technical idea described in the claims.

[0085] For example, among the processes described in the embodiments, all or part of the processes described as being performed automatically can be performed manually, or all or part of the processes described as being performed manually can be performed automatically by known methods.

[0086] Furthermore, the processing procedures, control procedures, specific names, information including parameters such as registration data and search conditions for each process, screen examples, and database configuration shown in this specification and in the drawings may be changed at will unless otherwise specified.

[0087] Furthermore, with respect to the application web server device 1 or the display control system, each component shown in the illustration is a functional concept and does not necessarily need to be physically configured as shown.

[0088] For example, the processing functions of the application web server device 1, particularly those performed by the control unit 3, may be implemented in whole or in part by a CPU (Central Processing Unit) and a program interpreted and executed by the CPU, or they may be implemented as wired logic hardware. The program is recorded on a non-temporary computer-readable recording medium containing programmed instructions for causing the information processing device to execute the processing described in each embodiment, and is mechanically read by the server device 1 or the user terminal device 40 as needed. That is, a storage unit such as ROM or HDD records a computer program that works in cooperation with the OS to give instructions to the CPU and perform various processing. This computer program is executed by being loaded into RAM and works in cooperation with the CPU to constitute the control unit 3.

[0089] Furthermore, the display control program for application web server device 1 may be stored on another server device connected to application web server device 1 via any network, and it is possible to download all or part of it as needed.

[0090] Furthermore, the display control program for executing the processes described in each embodiment may be stored on a non-temporary computer-readable recording medium, or it may be configured as a program product. Here, "recording medium" includes any "portable physical medium" such as memory cards, USB (Universal Serial Bus) memory, SD (Secure Digital) cards, flexible disks, magneto-optical disks, ROMs, EPROMs (Erasable Programmable Read Only Memory), EEPROMs (Registered Trademark) (Electrically Erasable and Programmable Read Only Memory), CD-ROMs (Compact Disk Read Only Memory), MOs (Magneto-Optical Disks), DVDs (Digital Versatile Disks), and Blu-ray (Registered Trademark) Discs.

[0091] Furthermore, "program" refers to a data processing method described in any language or writing method, regardless of its format, such as source code or binary code. Note that "program" is not necessarily limited to a single, monolithic structure; it also includes distributed structures consisting of multiple modules or libraries, and those that work in cooperation with other programs, such as an operating system, to achieve their functions. Regarding the specific configuration and reading procedure for reading the recording medium in the application web server device 1 shown in the embodiment, as well as the installation procedure after reading, well-known configurations and procedures can be used.

[0092] Storage units 2 and 42 are storage means such as memory devices like RAM and ROM, fixed disk devices like hard disks, flexible disks, and optical disks, and store various programs, tables, databases, and web page files used for various processing and website provision.

[0093] Furthermore, the application web server device 1 may be configured as a known personal computer device or an information processing device such as a workstation, or as an information processing device to which any peripheral devices are connected. The information processing device may also be implemented by implementing software (including programs or data, etc.) that realizes the processing described in this embodiment.

[0094] Furthermore, the specific forms of distribution and integration of the devices are not limited to those shown in the illustration, and all or part of them can be configured by functionally or physically distributing and integrating them in any unit according to various additions or functional additions. In other words, the embodiments described above may be implemented in any combination, or the embodiments may be implemented selectively. [Industrial applicability]

[0095] This invention is particularly suitable for industries that input detailed data, such as product specifications. [Explanation of symbols]

[0096] 1. Application Web Server Device 2 Storage section 3. Control Unit 4. Communication Interface Section 6 Business API 7. Business Database 13 Web browsers 21 Communication Control Unit 22 Acquisition Department 23 Calculation Section 24 Screen generation section 30 Developer terminal device 31 Web Browsers 40 Client terminal devices 41 Web Browsers 55 Networks 100 Low-code development web server devices 101 Development Database

Claims

1. An acquisition unit that acquires the detailed data to be displayed, A binding control unit that displays the acquired detail data in strip-shaped input areas aligned in the row direction on the detail input control, The system includes an adjustment unit that adjusts the size of the detail input control to a size corresponding to the number of detail data items to be displayed. The adjustment unit includes a selection item, "Adjust to Number of Details," which adjusts the "height" of the detail input control according to the number of rows, which is the number of detail data items displayed by the detail input control; a selection item, "Fixed Value," which adjusts the "height," which is the width in the column direction and is the size of the detail input control, to the "Fixed Value," regardless of the size according to the number of detail data items to be displayed; and a selection item, "Fit to Outer Frame," which adjusts the detail input control to match the height of the panel or screen size, regardless of the size according to the number of detail data items to be displayed. The adjustment unit adjusts the size of the detail input control to the size corresponding to the selection item selected from among the above selection items. The adjustment unit adjusts the height of the detail input control to the minimum number of display details determined by a predetermined calculation, when the minimum number of display details is set. The adjustment margin is set to a predetermined fixed value which is the height of the margin between the data display area and the data row. The column header is an area other than the data rows, and is the display area for the column item names to be shown at the very top of the detail input control. The footer is defined as the area outside the data rows, and is the lowest display area within the detail input control. Minimum height = Column header height + Data row height + Adjustment margin + Footer height Column header height = Height of one column header row × Number of column header rows Data row height = (Height of one data row × Number of rows per unit) × Minimum number of details to display Footer height = Height of one footer line × Number of footer lines The calculation is performed, and if the calculation result is "current height < minimum height", the height of the detail input control is set to the minimum height, and if the calculation result is "current height ≥ minimum height", the height of the detail input control is set to the current height. A display control device characterized by the following.

2. The adjustment unit adjusts the height of the detail input control to the maximum number of display details determined by a predetermined calculation, when the maximum number of display details is set. The adjustment margin is set to a predetermined fixed value which is the height of the margin between the data display area and the data row. The column header is an area other than the data rows, and is the display area for the column item names to be shown at the very top of the detail input control. The footer is defined as the area outside the data rows, and is the lowest display area within the detail input control. Maximum height = Column header height + Data row height + Adjustment margin + Footer height Column header height = Height of one column header row × Number of column header rows Data row height = (Height of one data row × Number of rows per unit) × Maximum number of details to display Footer height = Height of one footer line × Number of footer lines The calculation is performed, and if the calculation result is "current height ≤ maximum height", the height of the detail input control is set to the current height, and if the calculation result is "current height > maximum height", the height of the detail input control is set to the maximum height. The display control device according to claim 1, characterized by the following:

3. In the case of multi-stage detail input control, the adjustment unit is as follows: The column header is an area other than the data rows, and is the display area for the column item names to be shown at the very top of the detail input control. The footer is defined as the area outside the data rows, and is the lowest display area within the detail input control. Column header height = Height of one column header row × Number of column header rows Data row height = (Height of one data row × Number of rows per unit) × Current number of data rows Footer height = Height of one footer line × Number of footer lines The calculation is performed, and the height of the multi-tiered detail input control is set to the height obtained by multiplying the "height of the column header," "height of the data row," and "height of the footer" by the number of rows. The display control device according to claim 2, characterized in that

4. When the "match to the number of details" option is selected, the adjustment unit adjusts the size of the detail input control to the specified number of display details, which is determined by either the "minimum number of display details" for adjusting the height of the detail input control to the minimum height determined by a predetermined calculation, or the "maximum number of display details" for adjusting the height of the detail input control to the maximum height determined by a predetermined calculation. The display control device according to claim 3, characterized by the following:

5. The adjustment unit adjusts the height of the detail input control, which is the width in the column direction of the detail input control, to a height corresponding to the number of detail data items to be displayed, by calculating the required "height" based on the row information indicating the "height" of the control element, which is set for the control element that is a child element of the detail input control. The display control device according to claim 4, characterized by the following:

6. The adjustment unit adjusts the height of the detail input control when the detail input control is activated, when detail data is bound by a button operation on the detail input control, or when an order to add or delete a detail row is executed. A display control device according to any one of claims 1 to 5, characterized by the above.

7. The acquisition unit performs an acquisition step to acquire the detailed data to be displayed, A bind control step in which the bind control unit displays the acquired detail data in strip-shaped input areas along the row direction on the detail input control, The adjustment unit includes an adjustment step of adjusting the size of the detail input control to a size corresponding to the number of detail data to be displayed, The adjustment step includes an option to "match the number of details" which adjusts the "height" of the detail input control according to the number of rows, which is the number of detail data items displayed by the detail input control; an option to adjust the "height," which is the width in the column direction and is the size of the detail input control, as a "fixed value" regardless of the size according to the number of detail data items to be displayed; and an option to "fit to the outer frame" which adjusts the detail input control to match the height of the panel or screen size, regardless of the size according to the number of detail data items to be displayed. The size of the detail input control is adjusted to the size corresponding to the selected option from among the above options. In the adjustment step, when the minimum number of display details is set to adjust the height of the detail input control to the minimum height determined by a predetermined calculation, The adjustment margin is set to a predetermined fixed value which is the height of the margin between the data display area and the data row. The column header is an area other than the data rows, and is the display area for the column item names to be shown at the very top of the detail input control. The footer is defined as the area outside the data rows, and is the lowest display area within the detail input control. Minimum height = Column header height + Data row height + Adjustment margin + Footer height Column header height = Height of one column header row × Number of column header rows Data row height = (Height of one data row × Number of rows per unit) × Minimum number of details to display Footer height = Height of one footer line × Number of footer lines The calculation is performed, and if the calculation result is "current height < minimum height", the height of the detail input control is set to the minimum height, and if the calculation result is "current height ≥ minimum height", the height of the detail input control is set to the current height. A display control method for a display control device characterized by the above.

8. Computers, An acquisition unit that acquires the detailed data to be displayed, A binding control unit that displays the acquired detail data in strip-shaped input areas aligned in the row direction on the detail input control, The size of the detail input control is configured to function as an adjustment unit that adjusts the size according to the number of detail data items to be displayed. The adjustment unit includes a selection item, "Adjust to Number of Details," which adjusts the "height" of the detail input control according to the number of rows, which is the number of detail data items displayed by the detail input control; a selection item, "Fixed Value," which adjusts the "height," which is the width in the column direction and is the size of the detail input control, to the "Fixed Value," regardless of the size according to the number of detail data items to be displayed; and a selection item, "Fit to Outer Frame," which adjusts the detail input control to match the height of the panel or screen size, regardless of the size according to the number of detail data items to be displayed. The adjustment unit adjusts the size of the detail input control to the size corresponding to the selection item selected from among the above selection items. The adjustment unit adjusts the height of the detail input control to the minimum number of display details determined by a predetermined calculation, when the minimum number of display details is set. The adjustment margin is set to a predetermined fixed value which is the height of the margin between the data display area and the data row. The column header is an area other than the data rows, and is the display area for the column item names to be shown at the very top of the detail input control. The footer is defined as the area outside the data rows, and is the lowest display area within the detail input control. Minimum height = Column header height + Data row height + Adjustment margin + Footer height Column header height = Height of one column header row × Number of column header rows Data row height = (Height of one data row × Number of rows per unit) × Minimum number of details to display Footer height = Height of one footer line × Number of footer lines The calculation is performed, and if the calculation result is "current height < minimum height", the height of the detail input control is set to the minimum height, and if the calculation result is "current height ≥ minimum height", the height of the detail input control is set to the current height. A display control program characterized by the following.

Images