페이지 이력

전국 지점의 매출 목표 달성 현황을 직관적으로 확인할 수 있도록 구성된 매출 모니터링 보고서입니다.

각 지점의 목표 금액, 매출 실적,  달성률 등을 시각화하고 월별 매출 실적 표를 통해 지점별 실적 추이를  분석함으로써 지점 간 매출 기여도를 빠르게 파악할 수 있습니다.

구축된 보고서는 여러 관리자가 동시에 접속하여 실시간으로 데이터를 공유하고 분석할 수 있습니다.

제공된 샘플 엑셀 파일을 활용해 손익계산서를 웹으로 변환해보세요.

Image Removed

Image Removed

Step 1. 엑셀 파일 준비

1. • 샘플로 제공된 엑셀 파일을 체험하기 샘플 자료에서 다운로드합니다.

Step 2. 엑셀 시트 이름 규칙

...

다운로드 받은 엑셀 파일에 있는 데이터를 활용해 지점별 매출 현황 보고서를 작성합니다.

각 시트에 대해 먼저 알아보겠습니다.

V시트 : V_지점별 매출 현황
엑셀에 여러 개의 시트가 존재할 때, 웹 화면에 보여질 시트의 이름은 'V_(문자)' 혹은 'V(숫자)' 형식으로 작성합니다.

...

Step 3. 변수 설정, V시트에 데이터 연결하기

...

엑셀의 '이름정의'기능을 사용해 P시트에서 '연도' 변수를 설정합니다.

...

This report provides a clear and intuitive view of sales performance and target achievement across all branches.

It visualizes each branch’s target amount, actual amount, and achievement rate, while the monthly performance table helps you analyze sales trends and quickly identify each branch’s contribution to total revenue..

The report supports real-time collaboration, allowing multiple managers to access, share, and analyze data simultaneously.

Use the provided sample Excel file to convert the Sales by Branch report to the web and explore your data interactively.

Image Added

Step 1. Prepare your excel file

1. • Download the sample Excel file from the Learning Experience Samples.
     Image Added

Step 2. Excel sheet naming conventions

• • Create the Sales by Branch report by utilizing the data in the downloaded Excel file.

  • Let’ start by understanding the role of each sheet in this report.

    • Sheet V : V_SalesByBranch
      When multiple sheets exist in Excel, the sheet to be displayed on the web must follow the format ‘V_(letters)’ or ‘V(number)’.

      Image Added
      
      
      

    • Sheet D : D1
      This sheet allows you to enter data or retrieve it by connecting to a database.
      Image Added
      
      

    • Sheet P : P1
      Create variables to be used when querying data. You can define cell values as variables by using Excel’s ‘Name Manager’ feature.
      In this exercise, we’ll use ‘Year’ as a variable to view the Sales by Branch for the selected year.
      Image Added
      
      

      참고사항
      title Excel Sheet Naming Convention
      The naming convention for Excel sheet is as follows: Image Added

      
      

Step 3. Set variables and connect data to the V sheet

• • Set the ‘Year’ variable in the P Sheet using Excel’s ‘Name Manager’ feature.

  • The variable can be used as a filter condition on the web screen. Once the condition is set, only data matching the variable’s value will be retrieved.
    Image Added
    
    
    

  • To aggregate data in the V sheet, create a derived column that separates the year and month using the Date column.
    Image Added

    
    

  • Use Excel’s SUMIFS function to calculate the ‘Target Amount’ and ‘Actual Amount’ corresponding to the selected year for each item.
    * Year : VS_YYYY
    * Branch : NYC, LA, WA …
    * Value : Target Amount, Actual Amount
    Example) Cell C13 : =SUMIFS('D1'!$D$C:$D$C,   'D1'!$A$E:$A$E, VS_YYYY,   'D1'!$C$B:$C$B, 'V_지점별 매출 현황Sales Performance Report'!$B12$B$13)

    Image Removed

    ‘목표금액’과 ‘매출실적’을 입력하면 관련 차트와 목표 대비 실적, 달성률이 자동으로 표시됩니다.

    Image Removed
    하단의 지점별 월별 실적 표도 엑셀의 SUMIFS 함수를 활용하여 각 지점별 월별 실적 값을 계산합니다.
    * 조회년월 : VS_YYYY & 1월 ...
    * 지점명 : 서울, 대전, 대구 Image Added

    
    

  • When you enter 'Target Amount' and 'Actual Amount', the related charts, Variance, and achievement rate are displayed automatically.

    Image Added
    
    

  • The table at the bottom showing monthly performance by branch also calculates each branch’s monthly values using Excel’s SUMIFS function.
    * Year : VS_YYYY
    * Month : Jan, Feb ...
    * 값 :  매출실적 ...
    

    먼저, SUMIFS 함수의 조건 설정을 간소화하기 위해, D1 시트에서는 '년도'와 '월' 데이터를 결합하여 하나의 파생 값을 생성합니다.

    Image Removed
    파생 열을 참조하여 SUMIFS 함수를 작성합니다.
    예) C21셀

     Branch : NYC, LA, WA …
    * Value : Actual Amount

  • Write the SUMIFS function by referencing the derived column.
    Example) Cell C21 : =SUMIFS('D1'!$D:$D,     'D1'!$F$E:$F$E, VS_YYYY&,  'V1D1'!$B21$B:$B,    ''V_Sales Performance Report'!C$21, 'D1'!$C$F:$C$F, 'V1V_Sales Performance Report'!C$20$B22)
    Image Removed
    

  • 데이터 입력을 완료되면 지점별 매출 현황 보고서가 완성됩니다. 완성된 엑셀 파일을 저장합니다.

    Image Removed

Step 4. 웹 화면으로 변환하기

...

EPA 사이트 메인 화면으로 돌아가 좌측 [도구]에서 i-AUD Designer를 클릭 합니다.

...

저장한 엑셀 파일을 마우스로 끌어 i-AUD Designer 도구 창 위에 놓습니다.

...

변환된 엑셀 화면이 웹 브라우저의 화면 크기에 맞게 자동으로 조정되도록 설정합니다.

...

웹으로 변환된 보고서를 선택하고 우측 속성 창 > Docking 영역 Left, Right, Bottom에 체크 합니다.

Image Removed

...

Border에서 Line Type을 'None'으로 설정하면 디자이너 화면에서 보고서의 테두리가 표시되지 않도록 설정 할 수 있습니다.

Step 5. 조회 조건 설정하기

• 연도별로 손익계산서를 웹에서 확인하기 위한 '년도' 조회 조건을 배치하고 설정해 보겠습니다.
조회할 연도를 선택할 수 있도록 '기준연도' 라벨과 달력을 배치한 뒤, 클릭 했을 때 데이터를 갱신할 수 있도록 '조회' 버튼을 추가합니다.
상단 UI Bot > Label을 클릭한 뒤 우측 속성 창 > Text 혹은 키보드 F2를 눌러 내용을 '기준연도'로 변경합니다.
Image Removed

• 달력을 배치하겠습니다. 
• UI Bot > Calendar > Year를 클릭하고 알맞은 위치에 배치합니다.
• 이 때, 배치한 달력 컴포넌트의 'Name'을 엑셀에서 '이름정의'한 변수명과 동일하게 설정하면 달력에서 선택한 값이 조회 조건으로 사용됩니다.
InitDate는 보고서를 처음 열었을 때 값을 설정할 수 있습니다.
Image Removed

• 마지막으로 '조회' 버튼을 배치해 보겠습니다.
• UI Bot > Button을 클릭하고 알맞은 위치에 배치합니다.
라벨과 마찬가지로 버튼의 Text를 '조회'로 수정한 뒤, Style에서 서식을 변경합니다.
이 때, BoxStyle을 활용하면 저장된 스타일을 빠르게 적용할 수 있습니다.
Image Removed

• '조회' 버튼을 클릭 했을 때, 설정한 날짜 변수 값으로 데이터가 갱신되도록 이벤트를 설정해 보겠습니다.
상단 Process Bot을 클릭해 Objects 목록에서 'Button'을 더블 클릭합니다. 
Image Removed


• Activities 탭으로 이동하여 'Refresh' 동작을 더블 클릭합니다. 

• 'Button'을 클릭했을 때 'Refresh' 동작이 실행되도록 프로세스봇 창에 배치된 'Button'을 선택 후 마우스로 끌어 'Refresh' 동작에 연결합니다.

•  Refresh 모듈의 상세 버튼을 클릭한 뒤, 갱신할 컴포넌트로 'MXGrid'를 선택합니다.
  (엑셀을 웹 화면에 끌어다 놓으면 MX-Grid 컴포넌트가 생성됩니다.)

  Image Removed

• • 이번에는 아래의 차트에 원하는 색상으로 표현되도록 색상 모듈을 연결합니다.
    Image Removed

  • 색상을 적용할 차트를 Objects 목록 에서 더블클릭 합니다.

           Image Removed

• • '차트'가 데이터와 연결 되었을 때 '[Chart] 차트 색상 팔렛트 지정하기' 동작이 실행되도록 프로세스봇 창에 배치된 차트에 'OnDataBindEnd'을 선택 후 마우스로 끌어 '[Chart] 차트 색상 팔렛트 지정하기' 동작에 연결합니다.

  • [Chart] 차트 색상 팔렛트 지정하기' 모듈의 상세 버튼을 클릭한 뒤, 적용할 차트와 색상 값을 입력합니다.
    * 색상값 Image Added
    
    

  • Once you have finished entering the data, the Sales by Branch report is complete. Save the completed Excel file.
    Image Added

Step 4. Convert the Excel file for the web using i-AUD Designer

• • From the EPA main screen, go to [Menu] > [Tool] and launch i-AUD Designer.

  • Drag and drop the saved Excel file into the i-AUD Designer window.

  • The Excel report now appears in the web view, preserving the original layout.
    Image Added
    
    

  • Ensure the report automatically resizes to fit the web browser window.

  • In the Properties pane on the right, check Docking: Left, Right, Bottom.

    Image Added

  • To remove the border from the report on the designer screen, set the Line Type property under Border to ‘None’.

Step 5. Configure the Search filter

• • Next, add and configure the 'Year' filter to view the Sales by Branch report by year on the web.
  • Place a ‘Year’ label and a calendar so that users can select the year to filter, and add a ‘Refresh’ button to refresh data when clicked.
    
    
  • From the UI Bot menu at the top, click Label and place it on the designer. In the Properties pane, change the Text propertyto ‘Year’, or press F2 on your keyboard. You can also customize the label’s font, color, and other style properties in Style.
    Image Added
    
    
  • Next, add the calendar.
  • From UI Bot > Calendar, click Year and place it next to the label.
  • Set the calendar’s Name property to 'VS_YYYY', the same variable you defined in the Excel’s ‘Name Manager’. This ensures that the value selected in the calendar is used as the filter condition.
    Optionally, set InitDate to define the default value when the report is first opened.
    Image Added
    
    
    
  • Finally, add the ‘Search’ button to the designer.
  • From the UI Bot menu at the top, click Button and place it in the desired location on the designer.
  • Similar to the label, change the button’s Text property to ‘Refresh’, and adjust its formatting in Style.
    You can use BoxStyle to quickly apply a saved style to the button.
    Image Added
    
    
  • Set up an event so that when the ‘Refresh’ button is clicked, the report data is refreshed using the value from the Year variable.
  • Click Process Bot at the top. In the Objects list, double-click Button with a name ‘Button’.
    Image Added
    
    

  • In the Activities list, double-click ‘Refresh’ module.

  • In the Process Bot window, select the 'Button' placed on the window and drag it to the 'Refresh' action link them, so that clicking the 'Button' triggers the Refresh action.

  • In the Refresh module details, select the MXGrid component to refresh, and drag a connection line from the Button to Refresh Module.
    (Note: Dragging and dropping the Excel file onto the web screen automatically creates the MXGrid component.)
    Image Added
    
    

• • This time, connect the color module so that the chart below is displayed in the desired colors.
    Image Added
    
    

  • In the Objects list, double-click the chart to which you want to apply colors.

•          Image Added
• 
  

  • When the ‘chart’ is connected to data, select ‘OnDataBindEnd’ on the chart placed in the Process Bot window, then drag and connect it to the ‘[Chart] Change Chart Palette’ module, and enter the chart and color values to apply.

    * Color values : #195BAF, #2797FA, #66D8BD, #E2E6EA, #F98A45

           Image Removed
  
• 프로세스봇을 저장하고 닫습니다.
보고서 설정이 완료되었습니다Image Added

• Save and close the Process Bot.
• The report setup is now complete.

Step 6.

...

 Save your report

• • Save the completed report to My Folder.
    Image Added
    
    
  • From the EPA main screen, go to [Menu] > [Individual] in the left-hand sidebar.
  • Click the Search(Magnifying glass icon) button to refresh the report list and confirm your saved report.
  • Change the year and click the 'Search' button to see the data updated.
    Image Added